在使用钩子的反应中没有得到更新的状态值？

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]);

或者，不要记住buttonHandler回调。

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