reactjs - 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

谢谢

标签： reactjsmui-datatable

Answer 1

MUIDataTable不带括号的导入，例如：

import MUIDataTable from "mui-datatables";

在这里您的代码框已修改。