Реакция набора Hook от вызова функции вне компонента

Question

Я тестирую новые React Hooks, и я столкнулся с поведением, которое не могу исправить (и не понимаю ни того, ни другого). По сути, у меня есть мой функциональный компонент, а внутри - функция, в которой я устанавливаю хук. Эта функция передается обработанному компоненту и вызывается из последнего обработанного компонента с использованием реквизита. Жаль, что крючки родителя не обновляются соответственно!

Я знаю, что это может показаться трудным для понимания, но я воспроизвел ошибку здесь https://codesandbox.io/s/vvwp33l7o5

Как видите, в App Component есть функция onResize, которая должна обновлять хук counter. Эта функция передается в ResizeObserverContainerHook Component, и из этого последнего вызывается при изменении размера ResizeObseverContainerHook div. Как видите, переменные width и height в функции onResize верны, но хук counter, похоже, не обновляется! Фактически, оно остается равным 1 навсегда.

Я не знаю, кажется, что я не могу обновить хук извне Компонента (и это похоже на состояние в React Stateful Component, но, по крайней мере, я мог передать функцию, как в этом случае, но это не так работа: /).

Любая идея, как я могу сделать, чтобы setCounter на 12 работает index.js работает?

Answer 1

После перепроверки вашего кода я обнаружил, что проблема была вызвана [] в useEffect, вам следует удалить его, но это вызовет еще одну проблему с props.onResize, которая будет вызываться в каждом кадре для решения проблемы использования EventListener

Answer 2

Другой ответ немного запутан - то, что вы делаете, хорошо. Когда он говорит, что не вызывайте хуки изнутри, это означает, что не вызывайте реальный API условно или из циклов, например условно определяющий useEffect или useState.

Ваша проблема связана с пустым массивом, который вы передаете эффекту в Observer.js, поскольку он пуст, эффект никогда не обновляется, поэтому замыкание устарело, так что когда функция onResize вызывает setState, * Значение 1007 * всегда будет начальным значением нуля.

Вам необходимо, чтобы useEffect зависел от чего-либо, чтобы при обновлении компонента он очищал предыдущий эффект и прикреплял новую версию функции onResize к ResizeObserver.

Я немного покопался в твоей песочнице: https://codesandbox.io/s/x9z7k245lq?fontsize=14

Теперь он передает состояние счетчика компоненту Observer, и эффект запускается при каждом изменении счетчика. Дело в том, что я также добавил несколько ссылок в индекс, чтобы отслеживать высоту / ширину, чтобы состояние не всегда обновлялось, иначе оно будет бесконечно зацикливаться. Я думаю, вы можете думать об этом как shouldComponentUpdate.

Требуется время, чтобы правильно подумать о крючках. Если вы хотите, чтобы хорошая статья читала о хуках и избегала некоторых ловушек, касающихся пустого массива и устаревших замыканий, проверьте это: https://overreacted.io/making-setinterval-declarative-with-react-hooks/