React useState状态更新延迟，首次提交空输入控制台未输出error如何解决

React的状态更新函数setError是异步批量执行的，你在同一次事件回调中调用setError(true)之后，当前回调作用域内获取到的error仍是本次渲染对应的旧值（初始为false）。因此第一次点击空提交时，虽然已经触发了error状态更新，但后续判断逻辑用的还是旧的false值，就会打印success；等到下一次渲染时error才会更新为true，所以第二次点击才会触发error打印。

推荐直接合并判断逻辑，无需依赖刚更新的error状态，修改后代码如下：

import React, { useState } from "react";
import "./App.css";

function App() {
  const [input, setInput] = useState("");
  const [error, setError] = useState(false);
  const submitHandler = (e) => {
    e.preventDefault();
    if (input === "") {
      setError(true);
      console.log("error");
      return;
    }
    // 输入合法的分支逻辑
    setError(false);
    console.log("success");
  };
  return (
    <div className="App">
      <form onSubmit={submitHandler}>
        <input onChange={(e) => setInput(e.target.value)}></input>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

如果确实需要依赖更新后的error状态执行后续复杂逻辑，也可以新增useEffect监听error状态变化触发对应操作。

内容的提问来源于stack exchange，提问作者Yoshiminea