以状态存储时值正在变化答案

【问题标题】：value is changing when storing in state以状态存储时值正在变化
【发布时间】：2021-02-11 17:28:15
【问题描述】：

我遇到了一个非常奇怪的问题，当我在状态中存储一个值时，它正在改变值。

我正在使用来自 Antd 的时间选择器，当我选择一个时间时，它会触发一个名为 startTimeSelected 的 onChange，它会解析出所选时间的总分钟和小时数（例如 8:00 将是 8 小时）和 0 分钟），然后将其转换为分钟（totalStartMins），然后将其存储为totalStartM 的状态。但是当我控制台记录totalStartMins 和totalStartM 的值时，值不同。任何想法为什么会真的很有帮助。

这是带有代码的CodeSandbox，请注意，您实际上无法对其进行测试，我不知道为什么（我认为是 CodeSandbox x Antd 问题）。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

因为您在设置状态后立即记录了控制台。并且设置状态是一项异步任务，这就是为什么您没有在您的状态中获得更新的值。

您的状态值非常好。

要对此进行测试，您只需在返回函数中添加<p>{totalStartM}</p>。

或者您也可以使用 useEffect 挂钩来执行此操作。

useEffect(() => { console.log('Testing startM value', totalStartM) }, [totalStartM])

【讨论】：

感谢您的澄清，我不知道设置状态是异步任务。谢谢！
不用担心@aminicam。有什么事就伸手。快乐编码。 :)

【解决方案2】：

当你使用钩子时，然后做

const [totalStartM, setTotalStartM] = useState(0);

当你这样做时：

const startTimeSelected = (time, timeString) => {
    // ...
    setTotalStartM(totalStartMins);
    console.log(totalStartM);
};

您必须记住 totalStartM 直到组件下次呈现时才会更新。

https://codesandbox.io/s/time-picker-error-forked-z3vfm

【讨论】：