Реквизиты обновлены, componentDidUpdate не сработал
Есть ли когда-нибудь ситуация, когда componentDidUpdate НЕ срабатывает, даже если реквизиты обновлены в React?
Ответы 5
Вы можете подавить рендеринг, вернув false в shouldComponentUpdate().
Так что да, в этом случае componentDidUpdate() не сработает.
Есть 3 условия, которые могут привести к тому, что componentDidUpdate не сработает:
1) Вы написали кастомный shouldComponentUpdate, который вернул false.
2) Внутренние методы реагирования определили, что в виртуальной DOM не было изменений, поэтому было решено не выполнять повторную визуализацию.
3) Вы расширили что-то другое, кроме React.Component (например, PureComponent), у которого есть метод shouldComponentUpdate по умолчанию, который вернул false.
У меня есть ситуация, когда реквизиты в контейнере с mapStateToProps обновляются, реквизиты в компоненте обновляются (просто строка), компонент повторно отрисовывается .... и componentDidUpdate просто не срабатывает. Кажется, это не соответствует ни одной из этих ситуаций. Очень-очень странно.
Подождите, значит, вы получаете повторный рендеринг с видимым новым содержимым, но componentDidUpdate не запускается?
У меня есть console.info внутри функции рендеринга. У меня также есть соответствующая опора console.infoged сразу после. Он перерисовывает. У него есть новые данные. Я вижу это как в контейнере, так и внутри самой функции рендеринга ... но componentDidUpdate ничего не делает. На самом деле он работает в других контекстах, но в этом случае он просто сидит и ничего не делает при повторной визуализации компонента.
Я не понимаю, как новый рендер может быть запущен без вызова componentDidUpdate
Если у вас возникла та же проблема с сагой redux, мы можем отслеживать данные, сопоставленные с реквизитами, как обновление в redux, но компонент не вызывает didcomponentupdate.
@edencorbin У меня также есть ситуация, когда componentDidUpdate, хотя я вижу, что реквизиты изменены (но, в отличие от того, что описал JSeabolt, рендеринг также не запускается). Это то, что вы испытываете? Вы нашли причину?
У меня была та же проблема, что и у вас @JSeabolt. Я заметил, что мой компонент был отключен и снова смонтирован после каждого рендеринга. Проблема заключалась в моей функции mapStateToProps (redux-connect), которая давала мне «ключевые» реквизиты, разные для каждого рендера (она не предназначалась для использования в качестве ключевого атрибута React).
У меня была аналогичная ситуация, когда все необходимые реквизиты стали доступны и компонент был повторно отрисован, но componentDidUpdate так и не был вызван. Оказалось, что было состояние гонки, при котором состояние Redux не изменилось с момента первоначального рендеринга компонента, поэтому компонент буквально не обновлялся :)
У меня была аналогичная ситуация с @Apolo, когда мой компонент размонтировался и повторно монтировался, и я этого не осознавал, поэтому компонент рендерился так, как я ожидал, но componentDidUpdate так и не сработал. Может помочь добавить журналы в жизненные циклы, чтобы было понятно, что на самом деле происходит.
@AmieWilt У меня такая же проблема. Как ты это починил?
@OmarAbid прошло некоторое время с тех пор, как я опубликовал это, я не помню, что у меня было. Вы можете прислать мне снимок экрана / образец / ссылку на свой код или дать дополнительные пояснения?
это также может произойти, если ваш компонент находится в списке и ключ вашего компонента изменяется (то есть при каждом рендеринге), или ключ отсутствует, или ключ дублируется и т. д.
обратитесь к документации для получения подробной информации: https://reactjs.org/docs/lists-and-keys.html
Это была моя проблема. Моего компонента не было в списке, но, добавив в него множество свойств, я ошибочно предоставил ему изменяющийся атрибут «ключ», не предназначенный для использования в качестве ключа реакции.
Распространенная ситуация, когда это происходит, - это когда происходит несколько изменений свойств, которые ничего не влияют в виртуальной DOM.
Например, вы можете отобразить сообщение об успешном завершении, если API возвращает код состояния 200, при этом реквизиты меняются следующим образом:
API не вызывается:
this.props.apiState == false
API называется:
this.props.apiState == 'loading'
API успешно:
this.props.apiState == 'success'
В этой ситуации componentDidUpdate сработает только один раз, и если вы запишете в журнал this.props.apiState во время его запуска, вы увидите, что это loading. Таким образом, любой триггер в componentDidUpdate, ожидающий на success, не сработает.
ComponentWillReceiveProps решает эту проблему в более старых версиях React, а в более новых версиях React вы можете использовать shouldComponentUpdate для принудительного обновления, когда происходит желаемое изменение свойств.
Ответ Натана правильный, но он не решил мою проблему, когда я искал те же ответы.
Иногда кажется, что реквизиты обновлены, но это совершенно новый компонент, отображаемый с другими реквизитами. Проверьте componentDidMount (например, добавьте в него console.info), чтобы узнать, что именно происходит.
Похоже, я в одной лодке. Мой селектор сработал -> был запущен mapStateToProps -> повторный рендеринг компонентов -> повторный рендеринг субкомпонентов -> DOM изменен -> но НЕТ вызова
didUpdate. Я не думаю, что я изменяю какое-либо состояние или состояние редукции. Вы когда-нибудь находили проблему?