我正在尝试在材料表中添加一行并遇到错误
我提到的示例https://material-table.com/#/docs/features/editable
package.json
"dependencies": {
"@material-ui/core": "^4.1.0",
"@material-ui/icons": "^4.1.0",
"classnames": "^2.2.6",
"material-table": "^1.39.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1"
},
testingList.js
<div className={classes.root}>
<MaterialTable
title="Testing"
icons={tableIcons}
columns={this.state.columns}
data={this.state.data}
editable = {{
onRowAdd: newData => new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
})
}}
/>
</div>
错误：
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.
Check the render method of `MTableAction`.
如果我删除添加方法，该功能将按预期工作。
如果我删除tableIcons所在的行图标= {tableIcons}，它也可以正常工作
const tableIcons = {
FirstPage: FirstPage,
LastPage: LastPage,
NextPage: ChevronRight,
PreviousPage: ChevronLeft,
};
答案 0 :(得分：0)
我遇到了同样的问题，我在Actions下添加了components解决了该问题，使代码变成了：
<Table
title="Editable Preview"
columns={this.state.columns}
data={this.state.data}
editable={{
isEditable: rowData => rowData.name === "a", // only name(a) rows would be editable
isDeletable: rowData => rowData.name === "b", // only name(a) rows would be deletable
onRowAdd: newData => new Promise((resolve) => console.log("onrowadd", newData)),
onRowUpdate: (newData, oldData) => new Promise((resolve) => console.log("onRowUpdate", newData, oldData)),
onRowDelete: (oldData) => new Promise((resolve) => console.log("onRowDelete", oldData)),
}}
components={{
Actions: props => (
<div>
<IconButton
onClick={() =>
this.props.history.push(`/teams/${props.data.uuid}`)
}
>
<EditIcon />
</IconButton>
<IconButton
onClick={() =>
this.props.history.push(`/teams/${props.data.uuid}`)
}
>
<EditIcon />
</IconButton>
</div>
)
}}
/>
希望这会有所帮助！
答案 1 :(得分：0)
我通过降级到1.54.0版本解决了
答案 2 :(得分：0)
import React, { useState, useEffect } from 'react';
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
import SaveAlt from "@material-ui/icons/SaveAlt";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Add from "@material-ui/icons/Add";
import Check from "@material-ui/icons/Check";
import FilterList from "@material-ui/icons/FilterList";
import Remove from "@material-ui/icons/Remove";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import MaterialTable from "material-table";
import UserService from "../../services/user.service";
import ToastServive from "react-material-toast";
import userService from '../../services/user.service';
var _table_Data = [];
const toast = ToastServive.new({
place: "topRight",
duration: 2,
maxCount: 8,
});
const server_Data = userService._get_data().then((response) => {
return response.data.data
})
export default function InputTable(props) {
useEffect(() => {
UserService._get_data().then((response) => {
const dataUpdate = [...response.data.data];
setData([...dataUpdate]);
})
})
const [columns] = useState([
{
title: "Name",
field: "Name",
cellStyle: {
width: "15%",
maxWidth: "15%",
fontSize: 12,
},
headerStyle: {
width: "15%",
maxWidth: "15%",
},
},
{
title: "Exposure",
field: "EAD",
cellStyle: {
width: "20%",
maxWidth: "20%",
fontSize: 12,
textAlign: "left",
},
headerStyle: {
width: "20%",
maxWidth: "20%",
textAlign: "left",
},
},
{
title: "Def. Prob.",
field: "PD",
cellStyle: {
width: "25%",
maxWidth: "25%",
fontSize: 12,
textAlign: "left",
},
headerStyle: {
width: "25%",
maxWidth: "25%",
textAlign: "left",
},
},
{
title: "LGD",
field: "LGD",
cellStyle: {
width: "30px",
maxWidth: "30px",
fontSize: 12,
textAlign: "left",
},
headerStyle: {
width: 20,
maxWidth: 12,
textAlign: "left",
},
},
{
title: "Corr",
field: "w",
cellStyle: {
width: 20,
maxWidth: 20,
fontSize: 12,
textAlign: "left",
},
},
]);
const [data, setData] = useState(_table_Data);
return (
<div
style={{
fontSize: 10,
maxWidth: "100%",
margin: "auto",
padding: "0 0",
}}
>
<MaterialTable
icons={{
Check: Check,
DetailPanel: ChevronRight,
Delete: DeleteOutline,
Export: SaveAlt,
Filter: FilterList,
FirstPage: FirstPage,
LastPage: LastPage,
NextPage: ChevronRight,
PreviousPage: ChevronLeft,
Search: Search,
ThirdStateCheck: Remove,
Add: Add,
SortArrow: ArrowDownward,
Clear: Clear,
Edit: Edit,
ViewColumn: ViewColumn,
ResetSearch: Clear,
}}
options={{
actionsColumnIndex: -1,
headerStyle: {
fontSize: 12,
fontWeight: "bold",
backgroundColor: "white",
color: "black",
},
rowStyle: {
color: "black",
backgroundColor: "#eeeeee",
height: "50px",
},
actionsCellStyle: {
fontSize: "small", //doesn't work
},
showTitle: true,
search: true,
padding: "dense",
exportButton: true,
}}
title="Editable Preview"
columns={columns}
data={data}
editable={{
onBulkEditRow: (changes) => {
console.log(changes);
},
onBulkUpdate: (changes) =>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
}),
onRowAddCancelled: (rowData) => console.log("Row adding cancelled"),
onRowUpdateCancelled: (rowData) =>
console.log("Row editing cancelled"),
onRowAdd: (newData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const _sendData = newData;
UserService.datamanage(_sendData).then((response) => {
toast.success(JSON.parse(JSON.stringify(response.data.message)));
}).catch(() => {
toast.error("failed")
})
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataUpdate = [...data];
const index = oldData.tableData.id;
dataUpdate[index] = newData;
setData([...dataUpdate]);
resolve();
}, 1000);
}),
onRowDelete: (oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataDelete = [...data];
const index = oldData.tableData.id;
dataDelete.splice(index, 1);
setData([...dataDelete]);
resolve();
}, 1000);
}),
}}
/>
</div>
);
}