Реакция useEffect: функция setState в функции возврата не обновляет состояние во времени

Question

Я сделал пример здесь: https://codesandbox.io/s/cocky-brattain-de5r4

Я делаю интерфейс с вкладками при переключении с одного на другой, компонент должен сначала отменить свою регистрацию (очистка некоторых значений из родительское состояние) через функцию возврата useEffect и перерегистрировать себя (установить некоторые значения в родительском). Тем не менее, уборка, кажется, не работает. т. е. значение не изменяется до запуска функции регистра.

Посмотрите журнал консоли, когда он впервые регистрирует пустой объект в качестве начального значения. Но при нажатии на tab20 зарегистрированное значение показывает, что это такое до отмены регистрации.

В чем здесь проблема?

Я ожидаю, что произойдет следующее:

(загрузка приложения) -> журнал консоли: {} -> [ register] aaa, установленное на 1 -> (вкладка переключателя) -> [unregister] aaa, установленное на undefined -> журнал консоли: {aaa: undefined (но это 1)} -> [register] aaa, установленное на 1

Answer 1

(загрузка приложения) -> журнал консоли: {} -> [зарегистрировать] aaa, установленный в 1 -> (вкладка переключателя) -> [отменить регистрацию] aaa, установленный в undefined -> журнал консоли: {aaa: undefined (но это 1)} -> [register] aaa установлен в 1

На самом деле это:

(загрузка приложения) -> консольный журнал (myVal): { } -> [зарегистрировать] aaa, установленное в 1 -> (вкладка переключателя) -> обновить замыкание в регистре с помощью (myVal = {aaa: 1}) -> [отменить регистрацию] aaa, установленное в undefined -> консольный журнал: {aaa: 1} (из-за предыдущего закрытия)

Проблема в том, что при переключении вкладки компоненты повторно визуализируются, а функция register повторно объявляется, обновляя свое закрытие (myVal) .

Чтобы исправить это (результат регистрации), избавьтесь от замыкания:

const register = useCallback(name => {
  setMyVal(prevState => {
    console.log(prevState);
    return { ...prevState, [name]: 1 };
  });
}, []);