React中State更新为什么存在延迟？输入后打印值与实际值不一致

这个现象是React useState 的设计特性导致的，和textarea本身没有关系：

• setTextInput 属于异步批处理的状态更新方法，调用它之后不会立即修改当前作用域下的textInput变量，只是把更新请求提交给React的调度队列。本次函数执行上下文中的textInput还是当前渲染周期的初始值（你首次输入时当前渲染周期的textInput就是初始化的空字符串），所以打印出来是空。
• React中每个渲染周期的状态都是不可变的，本次渲染拿到的textInput在整个本次渲染的所有逻辑中都是固定值，只有等到React完成重渲染后，下一次渲染周期才能拿到更新后的"1"。

• 如果你需要立即获取刚输入的内容，直接读取e.target.value即可，这个是实时的输入值：

const inputAction= (e) => {
   const newVal = e.target.value
   setTextInput(newVal);
   console.log(newVal);
};

• 如果你需要在状态更新完成后执行逻辑，可以用useEffect监听textInput的变化，重渲染后useEffect触发时拿到的就是最新的状态值：

useEffect(() => {
  console.log(textInput)
}, [textInput])

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