JSX：.map 不是函数答案

【问题标题】：JSX: .map is not a functionJSX：.map 不是函数
【发布时间】：2020-08-13 21:15:57
【问题描述】：

我了解问题的根源，但我对如何解决它有点困惑。

我正在做类似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 属性的情况下解决它？

谢谢！

【问题讨论】：

标签： arrays reactjs object jsx

【解决方案1】：

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) => ...

【讨论】：

【解决方案2】：

data 是一个数组，因此要访问其内部内容，您必须以嵌套方式应用 map()：

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

【讨论】：