React 18 Automatic Batching未生效？受控输入与Div状态不同步求解

我有一个受控输入组件，还有一个绑定另一个状态变量的div，二者的状态在同一个回调函数中更新。为何输入框的值与下方div的文本不同步？

import React, { useState, useRef } from "react";

const Input = () => {
  const [search, setSearch] = useState('jk');
  const [text, setText] = useState('');

  const onChange = (e) => {
    setSearch(e.target.value) 
    setText(search)  
  }

  return (
    <>
      <input type='text' value={search} onChange={onChange} />
      <div>{text}</div>
    </>
  )
};

export default Input

我了解闭包和过期状态，但React 18的自动批处理（Automatic Batching）不是应该解决这个问题吗？

核心原因：和自动批处理无关，是状态异步更新+闭包捕获旧值 #

这问题和React 18的自动批处理没关系，本质是两个关键点：

1. React状态更新是异步的：调用setSearch后，search的状态不会立刻改变，React会把这次更新加入队列，等到合适时机再批量处理并触发重渲染。
2. 闭包捕获当前渲染周期的旧值：onChange函数是在当前渲染周期创建的，它捕获的search是当前渲染的旧状态值。所以调用setText(search)时，用的还是更新前的search，自然和输入框的最新值不同步。

自动批处理的作用是把多个状态更新合并成一次渲染，减少不必要的重渲染次数，但它不会让状态在当前函数执行过程中同步更新——批处理只是延迟了渲染时机，并没有改变状态更新的异步本质，也解决不了闭包捕获旧值的问题。

两种解决方式 #

方式一：直接复用输入的最新值

既然e.target.value就是输入框的最新内容，直接用它同时更新两个状态：

const onChange = (e) => {
  const newValue = e.target.value;
  setSearch(newValue);
  setText(newValue);
}

方式二：用useEffect监听search的变化

如果后续逻辑需要依赖search的状态变化来同步text，可以用useEffect监听search，一旦它更新就同步text：

import React, { useState, useEffect } from "react";

const Input = () => {
  const [search, setSearch] = useState('jk');
  const [text, setText] = useState('');

  useEffect(() => {
    setText(search);
  }, [search]); // 只有search变化时才执行

  const onChange = (e) => {
    setSearch(e.target.value);
  }

  return (
    <>
      <input type='text' value={search} onChange={onChange} />
      <div>{text}</div>
    </>
  )
};

export default Input

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