具有mui-datatable的对象数组

Question

问使用梅花数据表的人。它以字符串数组的形式处理数据，但是无法加载带有此错误的对象数组：

bundle.js:126379 Uncaught : e.map不是一个函数

import MUIDataTable from "mui-datatables";

class App extends React.Component {

render() {

const columns = ["Name", "Title", "Location", "Age", "Salary"];

const data = [
  {name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000"}      
];

const options = {
  filterType: 'dropdown',
  responsive: 'stacked'
};

return (
  <MUIDataTable 
    title={"ACME Employee list"} 
    data={data} 
    columns={columns} 
    options={options} 
  />
);

//return <div>a</div>;

  }

}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

至于它的价值，我基本上一直在将我的对象数组内联地映射为简单的值数组，如下所示：

const docs = [{"name": "Doc 1", "type": "PDF"}, {"name": "Doc 2", "type": "JPG"}];

<MUIDataTable
    title="Documents"
    data={docs.map(item => {
        return [
            item.name,
            item.type,
        ]
    })}
    columns={Object.keys(docs)}
/>

您可以将它集成到某种类型的包装组件中，但是在一次性情况下添加这个组件非常简单。

注意:如果数据数组是空的， MUI数据表不会呈现，所以我经常手动添加列，并在映射之前检查数据的长度，否则返回类似于[“"]的数组。这至少会导致呈现一个空白表。

Answer 2

mui-数据确实支持对象数组。为了使用对象数组，必须在列数组中指定object属性如下：

const columns = [
  { label: "Name", name: "name" },
  { label: "Title", name: "title" }, 
  { label: "Location", name: "location" }, 
  { label: "Age", name: "age" }, 
  { label: "Salary", name: "salary" }
];

const data = [
  {name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000"}      
];

const options = {
  filterType: 'dropdown',
  responsive: 'stacked'
};

return (
  <MUIDataTable 
    title={"ACME Employee list"} 
    data={data} 
    columns={columns} 
    options={options} 
  />
);

Answer 3

对于那些偶然发现这个问题的人来说。事实证明，我并没有遗漏任何东西，而且“”只支持数组--在计划中不支持对象数组。这太糟糕了--我认为组件本身应该以API返回的方式处理数据.哦，我想我得自己做包装组件来处理它。