向React Table传JSON对象报data.forEach is not a function如何解决

React Table 组件要求传入的 data 属性必须是数组类型，你当前从接口获取的 JSON 返回值是包含 leftRail、rightRail 两个数组的外层对象，直接将该对象赋值给 data 状态传入组件，就会触发 data.forEach is not a function 报错。

根据你的使用场景选择对应修改方式即可：

场景1：合并两组数据渲染为同一个表格（匹配你当前的列配置） #

你当前配置的列同时包含左栏的姓名、地址，和右栏的日期、订单号字段，两组数据的字段结构完全一致，直接合并为一个数组传入即可，修改接口请求的回调逻辑：

.then(function (myJson) {
  console.log(myJson);
  // 合并两个数组为一个新数组
  const mergedTableData = [...myJson.leftRail, ...myJson.rightRail]
  setData(mergedTableData)
});

场景2：分别渲染左栏、右栏两个独立表格 #

如果需要将两组数据分开展示，先调整状态初始值，再分别传入对应数组即可：

1. 修改状态初始定义：

const [data, setData] = useState({leftRail: [], rightRail: []});

2. 调整渲染部分代码，分别传入对应数组和匹配的列配置：

return (
  <div className='App'>
    {/* 左栏表格 */}
    <Table 
      columns={[
        {Header: 'Name', accessor: 'name'},
        {Header: 'Address', accessor: 'address'}
      ]} 
      data={data.leftRail} 
    />
    {/* 右栏表格 */}
    <Table 
      columns={[
        {Header: 'Date', accessor: 'date'},
        {Header: 'Order #', accessor: 'order'}
      ]} 
      data={data.rightRail} 
    />
  </div>
);

内容的提问来源于stack exchange，提问作者user2457545