使用MUI-Datatables加载对象数组报错：e.map is not a function

Hey there! Let’s break down why you’re running into this error and how to fix it quickly.

The root issue is straightforward: MUI-Datatables expects an array of arrays (2D array) by default, but you’re passing an array of objects. When the component tries to process your data, it attempts to call map() on a non-array value—hence the TypeError.

Here are two solid solutions to get your table working smoothly:

Solution 1: Convert Object Array to 2D Array #

If you want to stick with simple string column labels, you can map your object array into a 2D array that matches the component’s default expectation:

import MUIDataTable from "mui-datatables";

class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];
    // Convert each object to an array matching the column order
    const data = [
      {name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000"}
    ].map(item => [item.name, item.title, item.location, item.age, item.salary]);

    const options = {
      // Add your table options here (pagination, search, etc.)
    };

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

Solution 2: Use Column Object Configuration (Recommended) #

This is the more flexible approach, especially if you plan to add custom rendering or modify your table later. Instead of using simple strings for columns, define an array of column objects that map directly to your data object keys:

import MUIDataTable from "mui-datatables";

class App extends React.Component {
  render() {
    // Each column object links a data key to a table header label
    const columns = [
      { name: "name", label: "Name" },
      { name: "title", label: "Title" },
      { name: "location", label: "Location" },
      { name: "age", label: "Age" },
      { name: "salary", label: "Salary" }
    ];

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

    const options = {
      // Optional: Add custom settings like search, pagination, or row selection
    };

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

With this setup, MUI-Datatables automatically pulls values from your objects using the name property in each column definition. You can also extend this with customBodyRender if you need to format values (e.g., styling numbers or adding icons) later on.

内容的提问来源于stack exchange，提问作者lentyai