我收到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": "."
}
我该如何解决?
答案 0 :(得分:1)
正如您在问题的注释中意识到的那样,此警告来自TreeNode
的一部分react-lazy-tree
。
如果要摆脱它,您有两种解决方法: