Прослушиватели событий и перехватчики React

Проблема: При использовании перехватчиков React и перехватчиков событий в журнале консоли состояния отображается неверная информация.

Описание проблемы

Рассмотрим предоставленную CodeSandbox: https://codesandbox.io/s/lrxw1wr97m. Если дважды нажать кнопку «Добавить карту», ​​а затем нажать «Кнопка1» в первой карточке, консоль правильно отобразит состояние с двумя карточками. Однако если вы нажмете «Button2» на той же карточке (которая обрабатывается прослушивателем событий), консоль неправильно отобразит только одну карточку в состоянии.

Причина неправильного состояния

The Проблема возникает из-за разной обработки обработчиков событий в компонентах CardsProvider и Card. Обработчики событий, определенные в функциональном компоненте CardsProvider, handleCardClick и handleButtonClick, переопределяются каждый раз при визуализации компонента. Это означает, что они ссылаются на состояние на момент их определения, которое может быть устаревшим при срабатывании прослушивателя событий.

С другой стороны, компонент Card использует useRef для регистрации прослушивателя событий, который сохраняется на протяжении всего жизненного цикла компонента. В результате функция прослушивания событий ссылается на состояние на момент монтирования компонента, которое уже устарело.

Решение — использование функции обновления состояния

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

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

В этом сценарии прослушиватель событий получает свежее состояние, что устраняет проблему с устаревшими данными. Однако важно отметить, что функция обновления состояния может возвращать то же состояние, чтобы предотвратить ненужные обновления. Используйте console.log в функции обновления состояния, чтобы наблюдать за изменениями состояния.

Другие решения

Альтернативные способы решения этой проблемы включают в себя:

• Mutable Состояние: Использование useRef вместо useState.
• Перерегистрация прослушивателя событий вручную: Перерегистрация прослушивателя событий каждый раз при изменении состояния.
• Встроенная обработка событий: Использование встроенной обработки событий React вместо пользовательских прослушивателей событий.