React mui-datatable元素类型无效

Question

我正在尝试构建一个基本的mui-datatable组件，但是我得到了错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React, { useState, useEffect } from "react";
import { MUIDataTable } from "mui-datatables";

export default function App() {
  const [deposits, setDeposits] = useState([]);

  useEffect(() => {
    async function fetchData() {
      let arr = [];
      for (let i = 0; i < 5; i++) {
        arr.push({
          name: "Test",
          total: i + 1
        });
      }
      setDeposits(arr);
    }
    fetchData();
  }, []);

  const columns = [
    { name: "name", label: "Name" },
    { name: "total", label: "Amount" }
  ];

  const options = {
    filterType: "dropdown",
    pagination: false,
    selectableRows: "none"
  };

  return (
    <div className="App">
      <MUIDataTable
        title="Test Table"
        data={deposits}
        columns={columns}
        options={options}
      />
    </div>
  );
}

这里是沙箱：https://codesandbox.io/s/divine-breeze-jfymy?file=/src/App.js:0-827

谢谢

Answer 1

导入不带括号的MUIDataTable，如：

import MUIDataTable from "mui-datatables";

Here你的代码和盒子的修改。