не получает обновленное значение состояния в реакции с использованием хуков?

Question

Я использую functional components. У меня есть переключатели 2 и кнопка submit. На кнопке отправки я не могу получить updated value.

вот мой код https://codesandbox.io/s/peaceful-microservice-ywdoe?file= / src / App. js

шаг для воспроизведения

1. запуск приложения. Значение переключателя по умолчанию: no
2. Измените любой из радиокнопок на yes. Затем нажмите кнопку «Отправить». Он должен показать обновленное значение состояния. , но он показывает начальное состояние, почему ??

обработчик отправки кнопки

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, []);

если изменение blank array to one item in array state like this. он работает правильно, но он повторно отображает компонент кнопки, когда я меняю state. какое-нибудь лучшее решение ??? чтобы предотвратить повторный рендеринг и получить обновленное состояние?

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, [state]);

Answer 1

Добавьте state в массив зависимостей buttonHandler useCallback.

const buttonHandler = useCallback(async e => {
  e.preventDefault();
  console.log(state);
}, [state]);

Отредактируйте nifty-tree-5yrxq

В качестве альтернативы, не запоминайте обратный вызов buttonHandler.

const buttonHandler = e => {
  e.preventDefault();
  console.log(state);
};