我想了解 React 中 setState 的这种奇怪行为

Question

所以我已经使用 React 一段时间了，当我使用 useState 钩子提供的 setState 方法时，我注意到了这种奇怪的行为，当我使用 setState 更新一个状态的值，我在更新后立即引用该状态，它在更新之前给我状态的先前值但是当我在 DOM.[= 中显示状态时它正确显示11=]

<TextField
    label="Username"
    value={handle}
    error={error.hasError}
    id="username"
    onChange={e => {
        setHandle(e.target.value);
        console.log("Ran");
        for (let i = 0; i < e.target.value.length; i++) {
            if (!isAllowedChar(handle[i]))
                return setError({
                    message: "Username should only contain alphabets, digits, _ and .",
                    hasError: true,
                });
            setError({ message: "", hasError: false });
        }
    }}
/>

当我开始在输入字段中输入时，onChange 处理程序按预期在每次击键时更新并打印运行控制台，输入字段的值在每次击键时按预期正确更新，但下一次在用 setHandle 更新后我引用状态 handle 的代码它给了我以前的状态所以我的条件直到另一次击键后才满足即使上一次击键有误

我想知道我是否做错了什么，或者这只是 useState

中的一个奇怪错误

Answer 1

状态更新可能是异步的。 React 文档中清楚地提到了它：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous 如果您仍然质疑为什么 setState 是异步的，可以查看此线程：

Answer 2

如果您的应用程序由于状态更新速度不够快而无法按预期工作，您可以'wait'使用 useEffect 挂钩对其进行更新。

我想了解 React 中 setState 的这种奇怪行为

I would like to understand this weird behavior of setState in React

javascript

reactjs

react-hooks

use-state