ERROR: Using UNSAFE_componentWillReceiveProps (NextJs / Redu

Question

今天我开始构建一个Next.js应用程序。我使用Redux (next-redux-wrapper)来管理我的全局状态。(我也用redux-persist持久化一些reducer)。我刚刚实现了redux-thunk，立即得到了一个非常奇怪的错误。我真的不知道为什么会出现这个错误。我基本上只是做了设置，没有创建任何减速器(错误仍然存在，在我创建减速器之后)。这不是第一次了，我做了同样的设置没有任何问题，但那一次我不能摆脱这个错误。

错误代码

警告:在严格模式下使用UNSAFE_componentWillReceiveProps不是推荐使用，并可能指出代码中的错误。看到***

• 将数据获取代码或副作用移到componentDidUpdate.
• 如果你在道具改变时更新状态，重构你的代码以使用记忆***技术或将其移动为静态getDerivedStateFromProps。欲知详情，请浏览:https://reactjs.org/link/derived-state请更新以下内容组件:withRedux (MyApp)

如果您需要更多代码，请询问。我真的没有更多的钱了。可能是package.json

_app.js

import App from 'next/app'
import { wrapper } from '../reduxStore/store'
import { useStore } from 'react-redux'
import PropTypes from 'prop-types'
function MyApp({ Component, pageProps }) {
const store = useStore((state) => state)
return <Component {...pageProps} />
}
MyApp.propTypes = {
Component: PropTypes.func,
pageProps: PropTypes.object,
}
export default wrapper.withRedux(MyApp)

store.js

import { createStore, applyMiddleware, combineReducers } from 'redux'
import { HYDRATE, createWrapper } from 'next-redux-wrapper'
import thunkMiddleware from 'redux-thunk'
import userReducer from './reducers/userReducer'
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== 'production') {
const { composeWithDevTools } = require('redux-devtools-extension')
return composeWithDevTools(applyMiddleware(...middleware))
}
return applyMiddleware(...middleware)
}
const combinedReducer = combineReducers({
user: userReducer,
})
const reducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
}
// if (state.count.count) nextState.count.count = state.count.count // preserve count value on client side navigation
return nextState
} else {
return combinedReducer(state, action)
}
}
export const makeStore = ({ isServer }) => {
if (isServer) {
//If it's on server side, create a store
return createStore(reducer, bindMiddleware([thunkMiddleware]))
} else {
//If it's on client side, create a store which will persist
const { persistStore, persistReducer } = require('redux-persist')
const storage = require('redux-persist/lib/storage').default
const persistConfig = {
key: 'nextjs',
whitelist: ['user'], // only counter will be persisted, add other reducers if needed
storage, // if needed, use a safer storage
}
const persistedReducer = persistReducer(persistConfig, reducer) // Create a new reducer with our existing reducer
const store = createStore(
persistedReducer,
bindMiddleware([thunkMiddleware]),
) // Creating the store again
store.__persistor = persistStore(store) // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature
return store
}
}
export const wrapper = createWrapper(makeStore)

Answer 1

这是因为第三方库正在使用componentWillReceiveProps-componentWillReceiveProps被自动重命名为UNSAFE_componentWillReceiveProps。这是因为这些方法现在被认为是遗留代码，React正在弃用这些生命周期方法和其他方法。

不幸的是，这并不是一个立竿见影的解决方案。

• 你可以fork代码并自己更新
• 在代码的GIT页面上启动一个问题，希望他们的更新维护者修复这个问题。
• 找到另一个库来做相同的工作。
• 编写自定义逻辑来做与库相同的事情
• 使用这个库，希望他们在React弃用之前修复它。

Answer 2

由第三方库(next-redux-wrapper)引起的关于遗留生命周期方法(不安全)的错误，之前的名称是componentWillReceiveProps，该名称将继续工作到版本17。

修复

你可以使用react-codemod来自动更新你的组件。并使用重命名不安全生命周期属性

npx react-codemod rename-unsafe-lifecycles <path>

我到第三方库的路径是path=./node_module/next-redux-wrapper/lib/index.js

谢谢