Почему componentDidUpdate бесконечно обновляется?

Question

Мне нужно сбросить картинку, затем загрузить ее на сервер и обновить интерфейс. У меня есть проблема, метод жизненного цикла componentDidUpdate начинает обновляться бесконечно, в состоянии, которое я указал, чтобы сравнить this.state с prevState. (PrevState не определено, я не могу понять, почему).

Я положил свой код в песочницу, надеюсь, это будет понятно. https://codesandbox.io/s/headless-smoke-4xxi2

Answer 1

ПОЧЕМУ: Это похоже на проблему адреса ссылки / переменной памяти.

Когда вы сохраняете в itemsList, вы создаете новую ссылку, потому что вы получаете не примитивное значение из API. JS всегда работает со ссылками, когда речь идет о не примитивных значениях. Таким образом, ваш if (this.state.itemsList !== prevState.itemsList) всегда будет возвращать true, потому что itemsList - это массив, который не является примитивным набором данных, что означает, что JS не проверяет свои значения, а только ссылки.

В этом случае я вижу два решения atm:

1. Запретить обновление состояния, если значения совпадают

OR

2. Проверка по значениям с помощью соответствующей функции проверки в этом утверждении if (this.state.itemsList !== prevState.itemsList)

Надеюсь, я смог объяснить. Ура!

Answer 2

prevState - второй аргумент для componentDidUpdate. Попробуй -

componentDidUpdate(prevProp, prevState) {
    console.log(this.state.itemsList, prevState.itemsList);
    if (this.state.itemsList !== prevState.itemsList) {
      // if you remove the comment from this method, then an infinite update will begin
      //
       this.updateItemList();
    }
  }

Answer 3

Вы не используете правильный параметр . См. ComponentDidUpdate принимает prevProps в качестве первого аргумента и prevState в качестве второго.

Попробуйте это

componentDidUpdate(prevProps, prevState)