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

【问题标题】：not getting updated state value in react using hooks?使用钩子在反应中没有获得更新的状态值？
【发布时间】：2020-11-02 04:52:33
【问题描述】：

我正在使用functional components。我有2 单选按钮和submit 按钮。在提交按钮上我无法获得updated value。

复制步骤

按钮提交处理程序

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

【问题讨论】：

useChangeHandler 在 App.js 中未定义。 userchangehandler.js 在沙箱中为空。从您的 sn-p 的外观来看，尽管我可以看到您已经使用空的依赖数组将初始状态包含在 useCallback 钩子中。我认为如果您将state 添加到依赖项中，它应该起作用。 TBH 可能也没有理由记住这个回调，因为Submit 除了渲染按钮之外什么都不做。
为什么要不按钮重新渲染？
检查更新链接codesandbox.io/s/dreamy-darwin-pi09b?file=/src/…
@DrewReese 更新链接codesandbox.io/s/dreamy-darwin-pi09b?file=/src/…
刚刚将state 添加到buttonHandler useCallback 依赖数组中对其进行了测试，它可以工作。

【解决方案1】：

将state 添加到buttonHandler useCallback 依赖数组。

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

或者，不要记住 buttonHandler 回调。

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

【讨论】：

我明白你的意思，但我会优化这个？？出于性能方面的考虑，button 组件在状态更改时会再次重新渲染。这是最佳做法吗？
我为什么要问这个，因为如果我的表单中有多个元素。当我更改任何组件状态时，它会重新渲染 button 组件
@user944513 这看起来完全属于过早优化的范畴。对于useCallback，它有必要重新渲染，因为您需要更新回调以包含更新的状态。由于每次状态更新都会发生这种情况，并且事实上，每个渲染周期都会发生这种情况，因此无论如何都会重新渲染提交按钮。 not 使用 memoized 回调当前是否存在性能问题？