React mui-datatable 元素类型无效
React mui-datatable Element type is invalid
我正在尝试构建一个基本的 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
谢谢
导入 MUIDataTable
不带括号,如:
import MUIDataTable from "mui-datatables";
Here 您的 codesandbox 已修改。
我正在尝试构建一个基本的 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
谢谢
导入 MUIDataTable
不带括号,如:
import MUIDataTable from "mui-datatables";
Here 您的 codesandbox 已修改。