0

我想使用一个需要可编辑的数据表。我安装了 Material-table，我得到了错误

我在材料 ui 表（材料表）中得到了演示，它完全解决了我的目的。但它不工作

我的 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/Downloads/ictskill/client/node_modules /material-table/node_modules/date-fns/esm/format/index.js'

4

1 回答 1

1

看起来你不见了date-fns。

我看到你安装了"@date-io/date-fns": "^1.3.11"，但你需要它"date-fns": "2.3.0"。

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

于 2019-09-25T09:12:20.530 回答