JSX: .map не является функцией

Question

Я понимаю источник проблемы, но я просто немного застрял в том, как ее решить.

Я делаю что-то вроде items.map(item, index), но в консоли браузера я получаю целый объект. У этого объекта есть еще один объект, который называется data, и именно здесь я пытаюсь применить функцию map, так как я понимаю, что она работает только с массивами. Объект выглядит так:

{
    "data":[
    {"id":"1","name":"a","description":"aaaaaa"},
    {"id":"2","name":"b","description":"bbbbbb"},
    {"id":"3","name":"c","description":"cccccc"}
    ]
}

Но когда я пытаюсь сделать items.data.map, я получаю ошибку property 'data' does not exist on type 'Item[]', которая верна. Он отображается только в консоли браузера.

Чего мне не хватает, и можно ли разрешить его без добавления свойства data?

Спасибо!

Answer 1

data - это массив, поэтому для доступа к его внутреннему содержимому необходимо применить map () вложенным способом:

items.map((item) => item.data.map((data) => /* you can access the inner data here */));

Answer 2

items.data.map не работает, потому что ключ "data", а не data

Ваши ключи объекта не должны быть строками:

{
    data: [
    {id: 1, name: "a", description: "aaaaaa"},
    {id: 2, name: "b", description: "bbbbbb"},
    {id: 3, name: "c", description: "cccccc"}
    ]
}

Тогда вы можете сделать:

items.data.map((item, index) => ...