Получение сообщения Cannot update во время существующего сообщения о переходе состояния после обновления библиотеки - PullRequest
Новая
       85

Получение сообщения Cannot update во время существующего сообщения о переходе состояния после обновления библиотеки

0 голосов
/ 22 апреля 2019

Имейте приложение ReactJS + Redux + Saga, которое было недавно обновлено для использования последних (или близких к последним) версий соответствующих библиотек JS.После обновления библиотеки (без изменения кода) и запуска приложения, я сразу вижу предупреждающее сообщение "Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state." в консоли.Похоже, что он запускается при помощи избыточности, когда я вызываю диспетчерскую функцию (которая затем вызывает функцию в Provider.js, затем проходит реакцию-dom, а затем, в свою очередь, пишет предупреждающее сообщение. Опять ничего в моем коде не изменилось, и мойКод в основном построен с использованием функций без сохранения состояния.

Не уверен, как выяснить причину этого предупреждения - хотя приложение все еще работает нормально, как и ожидалось. Используя React 16.8.6, response-redux 6.0.1, response-router-dom 5.0.0, redux 4.0.1, redux-saga 1.0.2 и подключенный реагирующий маршрутизатор 6.4.0.

Ниже приведен пример страницы, которая может вызвать предупреждение:

import React from 'react'
import {connect} from 'react-redux'
import {links} from '../links'
import {notify} from '../notifications'

const Home = props => {
    const {dispatch} = props

    return (
        <main>          
            <p>
                <a href={links.DETAILS} onClick={() => {dispatch(notify(links.DETAILS))}} target="_blank">Go to Details</a>...
            </p>
        </main>
    )}
const dispatcher = dispatch => {
    dispatch(notify(links.HOME))

    return {dispatch}
}
export default connect(null, dispatcher)(Home)

1 Ответ

1 голос
/ 22 апреля 2019

Вы не можете вызывать dispatch внутри функции disaptcher.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 100. * * * * * * * * * * * * * * * * * * * * * *.ты позвонил dispatch.Эти параметры в конечном итоге запускаются как функции, вызываемые в цикле render подключенного компонента.Когда вы dispatch в цикле render изменяете состояние компонента React (похоже, это Provider ), что запрещено React.

Solution Переместите dispatch(notify(links.HOME)) к методу жизненного цикла.Например, вы можете добавить компонент Home (для этого потребуется переписать компонент Home как расширение класса React.Component: 

componentDidMount() {
  dispatch(notify(links.HOME))
}

ОБНОВЛЕНИЕ

Если вы хотите сделать это с бесклассовым компонентом, посмотрите, что question

...