材料表可编辑不起作用，需要一些依赖项?

Question

我想使用一个数据表，并且需要可编辑。 我安装了材料表，但出现错误

我在材料UI表(材料表(中得到了演示，这完全解决了我的目的。 但它不起作用

我的包.json

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/core": "^1.3.9",
"@date-io/date-fns": "^1.3.11",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"@material-ui/pickers": "^3.2.5",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"font-awesome": "^4.7.0",
"jwt-decode": "^2.2.0",
"material-table": "^1.50.0",
"material-ui-pickers": "^2.2.1",
"muicss": "^0.9.41",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.8.3",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"serve": "^10.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

和我的代码

render() {
return (
<MaterialTable
title="Editable Preview"
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)
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = this.state.data;
const index = data.indexOf(oldData);
data[index] = newData;
this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
}),
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
let data = this.state.data;
const index = data.indexOf(oldData);
data.splice(index, 1);
this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
}),
}}
/>
)
}
}
export default Editable; 

我希望它应该正常工作. 但是我收到以下错误

编译失败 ./node_modules/material-table/node_modules/date-fns/esm/format/index.js 错误： ENOENT： 没有这样的文件或目录，打开 '/Users/tlc- 01/下载/ictskill/客户端/node_modules/材料- table/node_modules/date-fns/esm/format/index.js'

Answer 1

看起来你错过了date-fns.

我看到您安装了"@date-io/date-fns": "^1.3.11"但您需要对其进行"date-fns": "2.3.0".

尝试使用npm install date-fns或yarn add date-fns安装它，它应该可以工作。