Material table editable 不工作并且需要一些依赖项？

Question

我想使用数据 table 并且需要 editable。我安装了 Material-table，但出现错误

我在 material ui table (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;

我希望它能正常工作。但我收到以下错误

Failed to compile ./node_modules/material-table/node_modules/date-fns/esm/format/index.js Error: ENOENT: no such file or directory, open '/Users/tlc- 01/Downloads/ictskill/client/node_modules/material- 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 安装它，它应该可以工作。

Material table editable 不工作并且需要一些依赖项？

Material table editable is not working and needs some dependencies?

reactjs

material-ui

material-table