javascript - 具有 mui-datatables 的对象数组

Question

向使用 mui-datatables 的人提问。它以字符串数组形式处理数据，但无法加载对象数组并出现此错误:

bundle.js:126379 Uncaught (in promise) TypeError: e.map is not a function

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

就其值(value)而言，我基本上是将我的对象数组映射到简单的内联值数组，如下所示:

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 数据表将不会呈现，因此我经常手动添加我的列，并在映射前检查数据的长度，否则返回一个数组，如 [[""]].这至少会导致呈现一个空白表格。