在React-Project中使用@ material-table时出错

时间：2019-12-10 11:20:13

标签： reactjs typescript material-ui material-table

我正在尝试提供一个库来进行反应项目（打字稿）material-table

我使用命令

在我的package.json中安装了 @ material-table 
sudo npm install material-table --save

这是我的配置文件 package.json 的样子

{
  "name": "af-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "~4.6.0",
    "@material-ui/icons": "~4.5.1",
    "@material-ui/styles": "~4.6.0",
    "@types/axios": "~0.14.0",
    "@types/node": "12.12.7",
    "@types/react": "~16.9.15",
    "@types/react-dom": "~16.9.4",
    "@types/react-router": "~5.1.2",
    "@types/react-router-dom": "~5.1.2",
    "ajv": "^6.10.2",
    "axios": "~0.19.0",
    "bootstrap": "~4.4.1",
    "class-transformer": "~0.2.3",
    "dotenv-webpack": "~1.7.0",
    "i18next": "~19.0.0",
    "jquery": "~1.9.1",
    "moment": "~2.24.0",
    "mui-datatables": "~2.13.3",
    "react-form-elements": "~4.13.2",
    "react-i18next": "~11.1.0",
    "react-native": "~0.61.5",
    "react-router-dom": "~5.1.2",
    "react-scripts": "3.2.0",
    "reflect-metadata": "~0.1.13",
    "tubular-react": "^3.0.4",
    "material-table": "^1.54.1"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --hot --config webpack.config.dev.js",
    "build": "webpack --mode production --config webpack.config.prod.js",
    "test": "npx jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "~7.7.2",
    "@babel/preset-env": "~7.7.5",
    "@babel/preset-react": "~7.7.0",
    "@types/enzyme": "~3.10.3",
    "@types/jest": "~24.0.23",
    "awesome-typescript-loader": "~5.2.1",
    "babel-loader": "~8.0.6",
    "enzyme": "~3.10.0",
    "enzyme-adapter-react-16": "~1.15.1",
    "html-webpack-plugin": "~3.2.0",
    "jest": "~24.9.0",
    "node-sass": "~4.13.0",
    "react": "^16.12.0",
    "react-dom": "~16.11.0",
    "react-test-renderer": "~16.11.0",
    "sass-loader": "~8.0.0",
    "source-map-loader": "~0.2.4",
    "ts-jest": "~24.1.0",
    "ts-loader": "~6.2.1",
    "typescript": "~3.7.2",
    "webpack": "~4.41.2",
    "webpack-cli": "~3.3.10",
    "webpack-dev-server": "~3.9.0"
  }
}

但是当我使用上面link中的简单示例

时

我在浏览器中遇到以下错误

checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `color` of value `inherit` supplied to `ForwardRef(TextField)`, expected one of ["primary","secondary"].
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent
printWarning @ checkPropTypes.js:20
checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `color` of value `inherit` supplied to `ForwardRef(FormControl)`, expected one of ["primary","secondary"].
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent

checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `color` of value `inherit` supplied to `ForwardRef(TextField)`, expected one of ["primary","secondary"].
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent
printWarning @ checkPropTypes.js:20
checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `color` of value `inherit` supplied to `ForwardRef(FormControl)`, expected one of ["primary","secondary"].
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent
printWarning @ checkPropTypes.js:20
react-dom.development.js:530 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
warningWithoutStack @ react-dom.development.js:530
react-dom.development.js:16159 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16159)
    at Object.useState (react.development.js:1619)
    at MaterialTableDemo (MaterialTableDemo.tsx:17)
    at renderWithHooks (react-dom.development.js:16241)
    at mountIndeterminateComponent (react-dom.development.js:18775)
    at beginWork$1 (react-dom.development.js:20137)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25738)
makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
tiny-invariant.esm.js:11 Uncaught Error: Invariant failed: Cannot unmount announcement node
    at invariant (tiny-invariant.esm.js:11)
    at react-beautiful-dnd.esm.js:5273
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
    at commitUnmount (react-dom.development.js:22334)
tiny-invariant.esm.js:11 Uncaught Error: Invariant failed: Cannot unmount ref as it is not set
    at invariant (tiny-invariant.esm.js:11)
    at remove (react-beautiful-dnd.esm.js:5194)
    at react-beautiful-dnd.esm.js:5199
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
11makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
react-dom.development.js:21810 The above error occurred in the <MaterialTableDemo> component:
    in MaterialTableDemo
    in AgreementRequestsComponent
    in Route
    in Switch
    in div
    in Router
    in BrowserRouter
    in AppComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:21810
react-dom.development.js:12193 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16159)
    at Object.useState (react.development.js:1619)
    at MaterialTableDemo (MaterialTableDemo.tsx:17)
    at renderWithHooks (react-dom.development.js:16241)
    at mountIndeterminateComponent (react-dom.development.js:18775)
    at beginWork$1 (react-dom.development.js:20137)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25738)
7makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
react-dom.development.js:530 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
    in WithStyles(ForwardRef(Tooltip)) (created by MTableAction)
    in MTableAction (created by MTableActions)
    in MTableActions (created by MTableToolbar)
    in span (created by MTableToolbar)
    in div (created by MTableToolbar)
    in div (created by MTableToolbar)
    in div (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent
warningWithoutStack @ react-dom.development.js:530
2makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
tiny-invariant.esm.js:11 Uncaught Error: Invariant failed: Cannot unregister Droppable with id headers as as it is not registered
    at invariant (tiny-invariant.esm.js:11)
    at Object.unregisterDroppable (react-beautiful-dnd.esm.js:4294)
    at react-beautiful-dnd.esm.js:5872
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
11makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
tiny-invariant.esm.js:11 
Uncaught Error: Invariant failed: Cannot unregister Draggable with id:
      3 as it is not registered
    at invariant (tiny-invariant.esm.js:11)
    at Object.unregisterDraggable (react-beautiful-dnd.esm.js:4266)
    at react-beautiful-dnd.esm.js:7743
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
47makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
react-dom.development.js:530 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (created by ForwardRef(TablePagination))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by ForwardRef(TablePagination))
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by ForwardRef(TablePagination))
    in ForwardRef(TablePagination) (created by WithStyles(ForwardRef(TablePagination)))
    in WithStyles(ForwardRef(TablePagination)) (created by MaterialTable)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MaterialTable)
    in tfoot (created by ForwardRef(TableFooter))
    in ForwardRef(TableFooter) (created by WithStyles(ForwardRef(TableFooter)))
    in WithStyles(ForwardRef(TableFooter)) (created by MaterialTable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent
warningWithoutStack @ react-dom.development.js:530
22makeStyles.js:155 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
react-dom.development.js:9596 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChildFromContainer (http://localhost:3000/bundle.min.js:114133:15)
    at unmountHostComponents (http://localhost:3000/bundle.min.js:127318:9)
    at commitDeletion (http://localhost:3000/bundle.min.js:127400:5)
    at commitMutationEffects (http://localhost:3000/bundle.min.js:129818:11)
    at HTMLUnknownElement.callCallback (http://localhost:3000/bundle.min.js:104873:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/bundle.min.js:104922:16)
    at invokeGuardedCallback (http://localhost:3000/bundle.min.js:104977:31)
    at commitRootImpl (http://localhost:3000/bundle.min.js:129545:9)
    at unstable_runWithPriority (http://localhost:3000/bundle.min.js:133572:12)
    at runWithPriority$2 (http://localhost:3000/bundle.min.js:116667:10)
react-dom.development.js:21810 The above error occurred in the <WithStyles(Component)> component:
    in WithStyles(Component) (created by MaterialTableDemo)
    in MaterialTableDemo (created by AgreementRequestsComponent)
    in AgreementRequestsComponent (created by Context.Consumer)
    in Route (created by AppComponent)
    in Switch (created by AppComponent)
    in div (created by AppComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppComponent)
    in AppComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:21810
scheduler.development.js:233 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (makeStyles.js:155)
    at makeStyles.js:238
    at makeStyles.js:193
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at safelyCallDestroy (react-dom.development.js:21900)
    at react-dom.development.js:22341
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)

我也尝试使用其他库，例如tubular-react和mui-datatables

但是到处都是错误的踪迹

P.s。。可能是与库版本有关的错误，因为在安装npm install时，我收到以下警告

npm WARN mui-datatables@2.13.3 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN mui-datatables@2.13.3 requires a peer of @material-ui/icons@^3.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN uno-material-ui@1.7.10 requires a peer of react@^16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN uno-material-ui@1.7.10 requires a peer of react-dom@^16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN uno-react@0.10.10 requires a peer of react@^16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN uno-react@0.10.10 requires a peer of react-dom@^16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-camel-case@6.1.0 requires a peer of jss@^9.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-default-unit@8.0.2 requires a peer of jss@^9.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-props-sort@6.0.0 requires a peer of jss@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-nested@6.0.1 requires a peer of jss@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-global@3.0.0 requires a peer of jss@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jss-vendor-prefixer@7.0.0 requires a peer of jss@^9.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.0.7 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

1 个答案:

答案 0 :(得分：0)

您可以升级到材料表的最新版本。

相关问题
最新问题