reactjs - 对象作为 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}
        />
    </>
  )

标签： reactjsaxios

Answer 1

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

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

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

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