为什么React输入框首次输入时打印useState状态值为空？

• React 中 useState 提供的状态更新函数（setTitle）是异步批量执行的：调用 setTitle 后，React 不会立刻修改当前作用域下的 title 变量，而是先将状态更新任务加入队列，等当前事件回调的所有同步代码执行完毕后，再统一触发组件重渲染，重渲染时才会生成新的状态值。
• 本质也和闭包特性有关：当前你调用的 getTitle 函数捕获的是本次渲染周期的 title 变量，只有组件重渲染后生成的新的 getTitle 函数，才会捕获到更新后的 title 值。
• 所以你在 setTitle 后直接打印的 title 永远是当前渲染周期的旧值：第一次触发事件时初始值为空字符串，就打印空；第二次触发时title是上一次更新后的值（也就是你第一次输入的字符），看起来总是慢一拍，这个特性和你绑定onChange还是onInput事件无关。

• 方案1：直接使用事件对象拿到的最新输入值
  如果只是需要实时获取当前输入内容做逻辑处理，直接使用e.target.value即可，不需要依赖状态变量：

function getTitle(e){
    const newTitle = e.target.value
    setTitle(newTitle)
    console.log(newTitle) // 此时拿到的就是最新输入的内容
}

• 方案2：用useEffect监听状态变化
  如果需要等状态更新完成后再执行对应逻辑，可以通过useEffect监听title的变化，回调会在状态更新、组件重渲染完成后触发，此时拿到的title就是最新值：

const [title, setTitle] = useState("")

// 监听title变化，更新完成后执行回调
useEffect(() => {
    console.log(title)
}, [title])

function getTitle(e){
    setTitle(e.target.value)
}

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