向使用 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"));
最佳答案
就其值(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 数据表将不会呈现,因此我经常手动添加我的列,并在映射前检查数据的长度,否则返回一个数组,如 [[""]].这至少会导致呈现一个空白表格。
关于javascript - 具有 mui-datatables 的对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49581529/