Получите данные API Json в формате объекта и массива, используя redux и реагировать

Question

Я успешно получаю данные из примера кода в следующем уроке с Redux.

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

Ниже приведен формат, используемый в руководстве, который прекрасно работает.

[
    {
        "id": 1,
        "label": "List item 1"
    },
    {
        "id": 2,
        "label": "List item 2"
    },
    {
        "id": 3,
        "label": "List item 3"
    },
    {
        "id": "4",
        "label": "label 4"
    },
    {
        "id": "5",
        "label": "label 5"
    }
]

Но я попробовал несколько способови не удается передать данные в формате ниже

{     
    "banner": [ 
        { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, 
        { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, 
        { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } 
    ] 
}

Токоподавитель и компонент отображения в другом файле:

export function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

return (
            <ul>
            {this.props.items.map((item) => (
              <li key={item.id}>
                {item.id}
              </li>
            ))}
            </ul>
        );

Пробовалсо следующими изменениями в редукторе:

export function items(state = {banner:[]}, action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

Answer 1

замените редуктор на этот:

{this.props.items.banner.map((item) => (
              <li key={item.id}>
                {item.id}
                {item.key}
                {item.image_url}
              </li>
            ))}

И измените PropTypes предметов в ItemList.js

items: PropTypes.object.isRequired

Я попробовал учебник и создал рабочий пример здесь: https://github.com/stackOverflow166/redux-nwb

Edit2:

Невозможно прочитать свойство 'map'

Эта проблема связана с типом даты. Добавьте это в ItemList.js, чтобы изменить тип даты на массивТолько массив имеет функцию карты.

let bannerArray = []
let banner = this.props.items.banner
for (let key in banner){
     bannerArray.push(banner[key])
}