我收到了“ componentWillReceiveProps”弃用警告,但我没有称之为

时间:2020-08-04 01:59:39

标签: reactjs

我收到Warning: componentWillReceiveProps has been renamed,但是我没有看到任何可以调用的方法。

错误堆栈在这里-它始于在setState中调用componentDidMount的时候,我认为这样做是可以的:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. 
See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details. 
* Move data fetching code or side effects to componentDidUpdate. 
* If you're updating state whenever props change, refactor your code to use memoization techniques or 
move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html 
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. 
In React 17.x, only the UNSAFE_ name will work. 
To rename all deprecated lifecycles to their new names, 
you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. 

Please update the following components: TreeNode
    printWarning                                                                                                            react-dom.development.js:12449
    lowPriorityWarningWithoutStack                                                                                          react-dom.development.js:12470
    push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings  react-dom.development.js:12637
    flushRenderPhaseStrictModeWarningsInDEV                                                                                 react-dom.development.js:25677
    commitRootImpl                                                                                                          react-dom.development.js:24924
    unstable_runWithPriority                                                                                                scheduler.development.js:701
    runWithPriority$2                                                                                                       react-dom.development.js:12231
    commitRoot                                                                                                              react-dom.development.js:24909
    finishSyncRender                                                                                                        react-dom.development.js:24304
    performSyncWorkOnRoot                                                                                                   react-dom.development.js:24284
    (anonymous function)                                                                                                    react-dom.development.js:12285
    unstable_runWithPriority                                                                                                scheduler.development.js:701
    runWithPriority$2                                                                                                       react-dom.development.js:12231
    flushSyncCallbackQueueImpl                                                                                              react-dom.development.js:12280
    flushSyncCallbackQueue                                                                                                  react-dom.development.js:12268
    scheduleUpdateOnFiber                                                                                                   react-dom.development.js:23685
    enqueueSetState                                                                                                         react-dom.development.js:14078
    push../node_modules/react/cjs/react.development.js.Component.setState                                                   react.development.js:464
    componentDidMount                                                                                                       MainContainer.jsx:110
    Async call from async function
    componentDidMount                                                                                                       MainContainer.jsx:68
    commitLifeCycles                                                                                                        react-dom.development.js:22079
    commitLayoutEffects                                                                                                     react-dom.development.js:25331
    callCallback                                                                                                            react-dom.development.js:337
    invokeGuardedCallbackDev                                                                                                react-dom.development.js:386
    invokeGuardedCallback                                                                                                   react-dom.development.js:439
    commitRootImpl                                                                                                          react-dom.development.js:25069
    unstable_runWithPriority                                                                                                scheduler.development.js:701
    runWithPriority$2                                                                                                       react-dom.development.js:12231
    commitRoot                                                                                                              react-dom.development.js:24909
    finishSyncRender                                                                                                        react-dom.development.js:24304
    performSyncWorkOnRoot                                                                                                   react-dom.development.js:24284
    scheduleUpdateOnFiber                                                                                                   react-dom.development.js:23674
    updateContainer                                                                                                         react-dom.development.js:27092
    (anonymous function)                                                                                                    react-dom.development.js:27517
    unbatchedUpdates                                                                                                        react-dom.development.js:24412
    legacyRenderSubtreeIntoContainer                                                                                        react-dom.development.js:27516
    render                                                                                                                  react-dom.development.js:27596
    ./src/index.js                                                                                                          index.js:12
    __webpack_require__                                                                                                     bootstrap:781
    fn                                                                                                                      bootstrap:149
    0                                                                                                                       main.chunk.js:26165
    __webpack_require__                                                                                                     bootstrap:781
    checkDeferredModules                                                                                                    bootstrap:45
    webpackJsonpCallback                                                                                                    bootstrap:32
    (anonymous function)                                                                                                    main.chunk.js:1

我正在使用反应16.13.1。

我的package.json的内容如下:

{
  "name": "kanvas",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:9292",
  "dependencies": {
    "ag-grid-community": "^23.1.1",
    "ag-grid-react": "^23.1.1",
    "bootstrap": "^4.3.1",
    "crypto-js": "^3.1.9-1",
    "dnd-core": "^9.3.2",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "eventemitter3": "^4.0.0",
    "immutability-helper": "^3.0.1",
    "jest-enzyme": "^7.1.1",
    "konva": "^3.4.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "node-sass": "^4.13.0",
    "react": "^16.13.1",
    "react-aad-msal": "^0.4.9",
    "react-app-rewired": "^2.1.3",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap-table-next": "^3.3.4",
    "react-bootstrap-table2-editor": "^1.2.4",
    "react-color": "^2.17.3",
    "react-datepicker": "^2.8.0",
    "react-day-picker": "^7.4.0",
    "react-dnd": "^9.3.2",
    "react-dnd-html5-backend": "^9.3.2",
    "react-dom": "^16.8.6",
    "react-json-view": "^1.19.1",
    "react-konva": "^16.8.7-3",
    "react-lazy-tree": "^1.0.4",
    "react-redux": "^7.1.0",
    "react-scripts": "3.0.1",
    "react-spring": "^8.0.27",
    "react-test-renderer": "^16.10.2",
    "react-tooltip": "^4.2.0",
    "react-uuid": "^1.0.2",
    "reactcss": "^1.2.3",
    "recharts": "^2.0.0-beta.1",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.1.0",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "url-parse": "^1.4.7",
    "use-image": "^1.0.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "debug": "react-app-rewired start --inspect-brk=9229",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "deploy.bat"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  },
  "homepage": "."
}

我该如何解决?

1 个答案:

答案 0 :(得分:1)

正如您在问题的注释中意识到的那样,此警告来自TreeNode的一部分react-lazy-tree

如果要摆脱它,您有两种解决方法:

  • 摆脱图书馆
  • 自己更新库以使用React的最新版本
相关问题