фото Цельсо на Неспособный
Поскольку я просматривал вопросы переполнения стека, я заметил, что многие ошибки связаны с попыткой получить доступ к значению состояния после его установки.
Атмосфера Пример вопроса На переполнении стека.
Я много раз наткнулся за то, что не знал о SetState быть асинхронной операцией.
Как получить доступ к значению состояния сразу после его установки?
😬 Воспроизведение проблемы
Вот код, который показывает доступ к значению состояния ( clickcounts ) сразу после установки его синхронно.
И давайте посмотрим на логическую ошибку.
Консоль.log не имеет доступа к обновленному значению состояния, хотя вызов сделан после SetState Анкет
😒 обходной путь (не рекомендуется)
Как SetState это операция, вы можете просто подождать, пока значение не будет установлено React.
Вы можете ждать определенный период, чтобы получить доступ к обновленному состоянию, используя settimeout Анкет
Тада 🎉. Это работает правильно?
Да Но нет, на данный момент вы просто молитесь 🙏) это SetState Заканчивается, прежде чем получить доступ к штату в settimeout Анкет
А также, вам нужно сохранить событие, чтобы иметь возможность получить доступ к аргументам события, как показано в строке № 2 ( e.persist () ).
Ссылаться на Объединение событий Для E.Persist.
😄 рекомендую способы
Есть два способы, как упоминалось в официальной документации React.
- Используя обратный вызов, переданный
SetStateАнкет - Используя
ComponentDidupdateметод жизненного цикла
Давайте рассмотрим их обоих.
1. Использование обратного вызова, переданного в SetState
SetState имеет следующее подпись Анкет
Обратный вызов вызывается после того, как состояние обновилось с использованием Обновляющий Метод, таким образом, обратный вызов имеет доступ к обновлению this.state Анкет
Вот обновленный код и демонстрация.
2. Использование метода жизненного цикла ComponentDidupDate
React Documentation ” Обычно рекомендует ” с помощью ComponentDidupdate Анкет
Я не смог найти причину для этого, но я думаю, потому что это потому, что ComponentDidupdate имеет доступ к предыдущему реквизиту и предыдущему состоянию (а также к обратному обращению в качестве моего демонстрации).
Вот код с использованием ComponentDidupdate Анкет
И эта демонстрация показывает, что ComponentDidupdate
- имеет доступ к обновленному значению состояния.
- вызывается перед методом обратного вызова Setstate.
👋 Раздвигающие слова
Честно говоря, я использовал только обратный вызов для доступа к обновленной стоимости, потому что я узнал только о рекомендуемом способе использования ComponentDidupdate При написании этого блога 😝).
И вы можете поиграть с демонстрацией на CodeSandbox Анкет
Пост Доступ к состоянию React сразу после установки его появился первым на Технический блог Sung Анкет
Оригинал: “https://dev.to/dance2die/accessing-react-state-right-after-setting-it-2kc8”