Ошибка реагирования: «Невозможно обновить во время существующего перехода состояния»

Question

Я пытаюсь написать приложение, которое использует компонент toastr. Однако, когда я пытаюсь отправить избыточное действие в этом компоненте, я получаю следующее консольное сообщение:

Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render или конструкторе другого компонента). Методы рендеринга должна быть чистая функция реквизита и состояния; побочные эффекты конструктора являются анти-паттерном, но могут быть перемещены в componentWillMount.

Вы можете увидеть пример этого в this codesandbox . В частности, проблема в компоненте toastr.js в строке 23. Спасибо!

Answer 1

Проблема именно в том, что говорится в сообщении об ошибке: вы запускаете форму обновления состояния React непосредственно внутри render() метода:

const Toasts = ({ appointments, resetState, toastedAppointment, toasts }) => {
  if (toasts.type) {
    switch (toasts.type) {
      case "dataFetched":
        resetState(); // Dispatching this action creates the warning.

В этом случае оно отправляет действие Redux, но в конечном итоге это приводит к вызову React setState().

Не делайте этого :) Логика побочных эффектов, такая как запуск какого-либо дополнительного обновления, основанного на текущем состоянии, вероятно, должна происходить примерно в componentDidUpdate. Компонент Toasts, вероятно, необходимо будет соответственно преобразовать из компонента функции в компонент класса.