React useState状态更新滞后于onChange输入值问题排查

React 中通过 useState 定义的状态更新函数是异步批量调度的，调用更新函数不会立刻修改当前函数执行上下文中的状态值：

• 函数组件每一次渲染时，内部的所有状态、事件处理函数都是和当次渲染绑定的闭包值，你在handleFilterChange事件回调里拿到的newFilter，永远是触发这次事件时、当前渲染周期里的旧状态值
• 调用setNewFilter(event.target.value)只是给React发一个更新通知，告诉React「下一次重渲染组件的时候，把newFilter状态改成传入的这个值」，不会改动当前回调里已经存在的newFilter常量，所以你紧接着打印newFilter拿到的永远是上一轮的旧值，看起来就像慢了一拍。

控制台输出参考 #

你当前写的过滤逻辑其实不会出功能问题：过滤国家时你直接用了event.target.value，这个值是输入框实时的最新值，不需要等状态更新，所以国家列表的过滤结果是对的，console.log打印的状态值不一致只是打印时机不对导致的，不影响最终渲染。
小提示：你现在用match做字符串匹配，如果输入内容包含正则特殊字符（比如.、*）会出现匹配异常，换成includes做子串匹配更适合搜索场景。

如果你的逻辑必须依赖更新后的状态，不要在setState调用之后立刻拿当前闭包里的状态值，选以下两种方案即可：

• 直接复用你已经拿到的最新值（比如当前场景下的event.target.value）做逻辑处理，不需要等状态更新完成
• 把依赖状态变化的逻辑移到useEffect中，把对应状态加入依赖数组，等状态更新完成、组件重渲染后会自动执行effect里的逻辑，此时拿到的一定是最新状态，示例：

function App() {
  const [countries, setCountries] = useState([]);
  const [newFilter, setNewFilter] = useState('');
  const [allCountries, setAllCountries] = useState([]);

  useEffect(() => {
    axios.get("https://restcountries.com/v3.1/all").then((response) => {
      setAllCountries(response.data);
    });
  }, []);

  // 依赖newFilter的逻辑放到effect里
  useEffect(() => {
    console.log("更新完成的newFilter", newFilter)
    if (newFilter) {
      const countriesToShow = allCountries.filter((country) =>
        country.name.common.toLowerCase().includes(newFilter.toLowerCase())
      );
      setCountries(countriesToShow);
    } else {
      setCountries([])
    }
  }, [newFilter, allCountries])

  const handleFilterChange = (event) => {
    // 事件回调里只做状态更新，不写依赖新状态的逻辑
    setNewFilter(event.target.value);
  };

  return (
    <div>
        <strong>
          <p>Find countries</p>
        </strong>
        <input value={newFilter} onChange={handleFilterChange} />
    </div>
  );
}

export default App;

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