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

Question

我在我的表格中发布数据列表时遇到问题，我希望你们能帮助我解决这个问题，这是我得到的错误 错误：对象作为 React 孩子无效（找到: 带有键 {name} 的对象）。如果您打算渲染一组子项，请改用数组。

  const columns = [
    {
     name: "name",
     label: "Name",
     options: {
      filter: true,
      sort: true,
     }
    },
    {
     name: "dateregistered",
     label: "Date Registered",
     options: {
      filter: true,
      sort: false,
     }
    },
    {
     name: "department",
     label: "Department",
     options: {
      filter: true,
      sort: false,
     }
    },

   ];
   
   const data = [

      posts.map(post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}])
    
       ];

  return (
    <>
        <MUIDataTable
          title={"Deactivated Users"}
          data={data}
          columns={columns}
          options={options}
        />
    </>
  )

Answer 1

我在您的 data 常量中发现了两个问题。第一个，.map 方法返回一个数组，因此无需将该值包装在数组键 [] 中。另一个问题是您也将.map 返回状态对象包装在数组键中，这就是显示创建对象错误的原因，因为您在主映射数组[[{ name: ... }], [{ name: ... }]] 中返回数组。

所以基本上你的问题的解决方案是：

const data = posts.map(post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'})) 

其中括号允许map方法直接返回对象。

Answer 2

问题是数据被创建为数组中的数组中的数组。这就是为什么当您尝试const data = posts.map(post => ...) 时错误仍然存​​在，因为数组中仍然存在数组。试了以上方法后，也重新写

post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}]

到

post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'})

（将方括号改为圆）

P.S 当您映射帖子以构建数据时，您构建了一个具有键“name”和值“'post.firstname'”的对象。该值是一个字符串文字，并且不访问其他一些 JS 对象（它将使“post.firstname”成为所有帖子的值。其他键也是如此。