React mui-datatable 元素类型无效答案

【问题标题】：React mui-datatable Element type is invalidReact mui-datatable 元素类型无效
【发布时间】：2021-09-25 13:21:54
【问题描述】：

我正在尝试构建一个基本的 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

谢谢

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

导入不带括号的MUIDataTable，如：

import MUIDataTable from "mui-datatables";

Here 你的密码箱已修改。

【讨论】：