错误：使用 UNSAFE_componentWillReceiveProps (NextJs / Redux)

Posted 2023-03-30

【中文标题】错误：使用 UNSAFE_componentWillReceiveProps (NextJs / Redux)

【英文标题】：ERROR: Using UNSAFE_componentWillReceiveProps (NextJs / Redux)

【发布时间】：2021-10-12 16:41:39

【问题描述】：

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

错误代码

警告：不能在严格模式下使用 UNSAFE_componentWillReceiveProps 推荐并可能指示您的代码中的错误。看 https://reactjs.org/link/unsafe-component-lifecycles了解详情。***

将数据获取代码或副作用移至 componentDidUpdate。 如果您在 props 更改时更新状态，请重构您的代码以使用记忆化 ***技术或将其移至静态 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)

【问题讨论】：

问题出在您正在使用的库中：github.com/kirill-konshin/next-redux-wrapper/blob/7.0.2/…

【参考方案1】：

这是因为第三方库正在使用 componentWillReceiveProps - componentWillReceiveProps 会自动重命名为 UNSAFE_componentWillReceiveProps。发生这种情况是因为这些方法现在被视为遗留代码，React is deprecating 该生命周期方法以及其他方法。

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

您可以分叉代码并自行更新 在代码的 GIT 页面上提出一个问题，并希望他们的维护者的更新能够解决这个问题。 找另一个图书馆做同样的工作。 编写自定义逻辑来做与库相同的事情 使用该库并希望他们在它被 React 弃用之前修复它。

【讨论】：

嗨，肖恩，感谢您的回复。您基本上可以在 nextt.config.js 中关闭 reactStrictMode。您是否仍然建议使用该库。不幸的是，没有更好的选择:(

警告仅在开发中显示。我不会禁用严格模式来抑制警告。警告在那里，所以你有时间在 React 将代码从框架中删除之前修复你的代码，它将不再工作。图书馆由你决定，但看起来它在维护者的雷达上需要修复 - github.com/kirill-konshin/next-redux-wrapper/issues/…

【参考方案2】：

第三方库(next-redux-wrapper)关于Legacy Lifecycle Methods (UNSAFE)的错误，之前的名字是componentWillReceiveProps，这个名字会一直工作到17版本。

修复它

您可以使用react-codemod 自动更新您的组件。并使用 rename-unsafe-lifecycles 属性

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

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

谢谢