Javascript 无法在React中映射json内的数组

我有一个带有嵌套数组的简单json：

{“pageIndex”：1，“items”：[{“id”：1，“name”：“name1”}，{“id”：2，“name”：“name2”}]，“hasPage”：false}

我尝试映射表渲染的项目：

import React from 'react'

const TableBody = props => {
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.id}</td>
                <td>{row.name}</td>
            </tr>
        )
    })

    return <tbody>{rows}</tbody>
}

const Table = props => {
    const { characterData } = props

    return (
        <table>
            <TableBody characterData={characterData} />
        </table>
    )
}

export default Table

从“React”导入React
const TableBody=props=>{
常量行=props.characterData.map（（行，索引）=>{
返回(
{row.id}
{row.name}
)
})
返回{rows}
}
const Table=props=>{
常量{characterData}=props
返回(
)
}
导出默认表

与

import React，{Component}来自“React”
从“./Table”导入表
类应用程序扩展组件{
状态={
字符：[]，
}
componentDidMount（）{
常量url=
'http://mysitename.com/api/characters'
获取（url）
.then（result=>result.json（））
。然后（结果=>{
这是我的国家({
人物：结果，
})
})
}
render（）{
常量{characters}=this.state
返回(
);
}
}
导出默认应用程序

但我给出了一个错误：

TypeError:props.characterData.map不是一个函数

，此代码仅适用于json中的非嵌套数组

当我更改为：

const rows=props.characterData.items.map（（行，索引）=>{

我有一个错误

TypeError:无法读取未定义的属性“map”

---

我在react控制台中看到

characterData.
TableBody
中的项

具有值。但是为什么我不能映射它们？为什么项未定义？

问题是，您接收的数据的形状是一个具有

项

数组的对象：

{
    "pageIndex": 1,
    "items": [
        {
            "id": 1,
            "name": "name1"
        }, {
            "id": 2,
            "name": "name2"
        }
    ],
    "hasPage": false
}

…但你的初始状态只是一种幻觉：

state = {
    characters: []
}

因此，与初始状态相关的内容不会与您稍后保存的内容相关

如果您只想从ajax响应中获得

项

，则可以通过保持初始状态并更改对响应的操作来修复它：

fetch(url)
  .then(result => result.json())
  .then(result => {
    this.setState({
      characters: result.items,
//                      ^^^^^^
    });
  });

（然后继续直接使用

props.characterData.map

）

---

或者，您可以选择另一种方式：

• 保留完整的ajax结果
• 使您的初始状态类似于：

  状态={
  人物：{
  项目：[]
  }
  }
  

• 将数据传递到

  表时使用
  .items

---

有两个不相关的附加问题需要解决：

您没有处理来自

获取的错误，并且

您没有处理这样一个事实，即

fetch

只会在网络错误上引发错误，而不会在HTTP错误上引发错误；您需要明确地检查HTTP成功

因此：

---

我没有尝试过，但这可能是因为您在从fetch api获取数据之前正在呈现表

{characters.length>0？：null}

也许这将有助于映射characterData内部的项，而不是characterData本身。

fetch(url)
  .then(result => result.json())
  .then(result => {
    this.setState({
      characters: result.items,
//                      ^^^^^^
    });
  });

fetch(url)
  .then(result => {
      if (!result.ok) {                                    // 
          throw new Error("HTTP error " + result.status);  // Check for HTTP success
      }                                                    // 
      return result.json();
  })
  .then(result => {
    this.setState({
      characters: result.items,
    });
  })
  .catch(error => {                                        //
    // ...handle/report the error...                       // Handle/report errors (network or HTTP)
  });                                                      //