ОШИБКА: использование UNSAFE_componentWillReceiveProps (NextJs/Redux)

avatar
drag98
8 августа 2021 в 20:15
878
2
1

Сегодня я начал создавать приложение Next.js. Я использую Redux (next-redux-wrapper) для управления своим глобальным состоянием. (Я также сохраняю некоторый редуктор с помощью redux-persist). Я только что внедрил redux-thunk и тут же получил очень странную ошибку. Я действительно не знаю, почему возникает эта ошибка. Я в основном только что сделал настройку, не создавая никаких редукторов (ошибка все еще была после того, как я создал редьюсер). Уже не первый раз делаю такую ​​же настройку без проблем, но в этот раз не могу избавиться от этой ошибки.

Код ошибки

Предупреждение. Использование UNSAFE_componentWillReceiveProps в строгом режиме недопустимо. рекомендуется и может указывать на ошибки в вашем коде. Видеть https://reactjs.org/link/unsafe-component-lifecycles для подробностей.***

  • Переместить код получения данных или побочные эффекты в компонентDidUpdate.
  • Если вы обновляете состояние при изменении реквизита, реорганизуйте свой код, чтобы использовать методы мемоизации *** или переместите его в статический получитьдериведстатефромпропс. Узнайте больше на: 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)
Источник
Ryan Le
9 августа 2021 в 01:35
0

Проблема заключается в используемой вами библиотеке: github.com/kirill-konshin/next-redux-wrapper/blob/7.0.2/…

Ответы (2)

avatar
Sean W
8 августа 2021 в 23:54
3

Это связано с тем, что сторонняя библиотека использует componentWillReceiveProps - componentWillReceiveProps автоматически переименовывается в UNSAFE_componentWillReceiveProps. Это происходит потому, что эти методы теперь считаются устаревшим кодом и React объявляет устаревшим этот метод жизненного цикла, а также другие.

К сожалению, это не самое быстрое решение.

  • Вы можете разветвить код и обновить его самостоятельно
  • Запустите проблему на странице кода GIT и надейтесь, что обновление, которое их сопровождающий исправит, устранит проблему.
  • Найдите другую библиотеку для выполнения той же работы.
  • Напишите пользовательскую логику, чтобы делать то же самое, что и библиотека
  • Используйте библиотеку и надейтесь, что они исправят ее до того, как она станет устаревшей в React.
drag98
9 августа 2021 в 08:39
0

Эй, Шон, спасибо за ответ. Вы можете просто отключить reactStrictMode в файле nextt.config.js. Вы бы по-прежнему рекомендовали использовать эту библиотеку. К сожалению, лучшего варианта нет :(

Sean W
9 августа 2021 в 16:17
0

Предупреждение отображается только в процессе разработки. Я бы не стал отключать строгий режим, чтобы подавить предупреждение. Предупреждение есть, поэтому у вас есть время исправить свой код до того, как React удалит его из фреймворка, и он больше не будет работать. Это зависит от вас для библиотеки, но похоже, что она находится на радаре сопровождающих, который должен быть исправлен - github.com/kirill-konshin/next-redux-wrapper/issues/…

avatar
alguerocode
30 августа 2021 в 05:52
0

ошибка, вызванная сторонней библиотекой (next-redux-wrapper) относительно устаревших методов жизненного цикла (UNSAFE), предыдущее имя — componentWillReceiveProps. Это имя будет работать до версии 17.

чтобы это исправить

вы можете использовать react-codemod для автоматического обновления ваших компонентов. и используйте свойство rename-unsafe-lifecycles

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

мой путь к сторонней библиотеке: путь=./node_module/next-redux-wrapper/lib/index.js

спасибо