对象作为 React 子对象无效（找到：带有键 {id, name} 的对象）。如果您打算渲染一组孩子，请改用数组

Question

我要做的是从API 中提取数据并使用material-table library 将其显示在表格中。我相信是我没有设法以正确的方式操作对象和数组。

我的 api 返回这个响应：

{
  "data": [
    {
      "id": 7,
      "field01": 1,
      "field02": 1,
      "field03": false,
      "people": {
        "id": 1,
        "name": "John"
      },
       "id": 8,
       "field01": 2,
       "field02": 2,
       "field03": false,
       "people": {
         "id": 2
         "name": "Mattew"
      },
    },
  ]
}

我用来从api 中提取数据的代码：

const [data, setData] = useState([]);

  const getValues = async () => {
    await api.get("/myrequest")
      .then(response => {
        setData(response.data.data);

      }).catch(error => {
        console.log(error);
      })
  }

我使用material-table创建的表：

<MaterialTable
            columns={[
              { title: 'Field 01', field: 'field01' },
              { title: 'Field 02', field: 'field02' },
              { title: 'Field 03', field: 'field03' },
              { title: 'Field 04',field: 'people.name' },
            ]}
            data={data}
            title="My table"
          />

查看文档我注意到了这一点：对象作为 React 子级无效（发现：带有键 {id, name} 的对象）。如果您打算渲染一组子项，请改用数组。

我相信这个错误是因为我的 api 返回了一个数组并且表格无法识别。

但我仍然无法做到这一点。我这样做的方式返回以下错误： 道具类型失败：提供给 MaterialTable 的道具 data 无效

Answer 1

好吧，您使用的包似乎无法处理嵌套对象，因此您有两个选择：

• 考虑使用另一个包，例如react-table

https://github.com/tannerlinsley/react-table

• 创建一个具有平面对象数组的适配器

const adapter = data => data.map(item => (
    {
        id: item.id,
        field01: item.field01,
        field02: item.field02,
        field03: item.field03,
        name: item.people.name,
    }
));

然后在你的组件中

<MaterialTable
    columns={[
        { title: 'Field 01', field: 'field01' },
        { title: 'Field 02', field: 'field02' },
        { title: 'Field 03', field: 'field03' },
        { title: 'Field 04',field: 'name' },
    ]}
    data={adapter(data)}
    title="My table"
/>

注意：

您应该使用此字段来访问您的数据

response.data.data

因为，正如您所写，response.data 有一个附加字段 data，其中包含您的对象数组。