Question

我想使用一个数据表，该数据表需要可编辑。我安装了Material-table，但出现错误

我在Material ui表（material-table）中得到了演示，它完全解决了我的目的。却不起作用

我的package.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 / client / node_modules / material- 表/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安装它，它应该可以工作。

物料表可编辑不起作用，需要一些依赖关系吗？

1 个答案: