React useState Hook更新对象失效问题求助（React 18.2.0）

你的代码里更新对象的写法本身是正确的，但console.log(filter)始终显示旧值的原因是React的useState更新是异步的——调用setFilter后，状态不会立刻改变，此时你拿到的还是更新前的filter引用。

解决方法： #

• 方法1：用useEffect监听状态变化
  当filter状态真正更新完成后，useEffect会触发，此时打印的就是最新值：

  import { useState, useEffect } from 'react';
  
  const [filter, setFilter] = useState({year: 0, month: 0});
  
  useEffect(() => {
    console.log(filter); // 状态更新后才会执行
  }, [filter]); // 依赖项为filter，状态变化时触发
  
  const buttonClick = (data) => {
    let datObj = {
      year: 2022,
      month: 1
    };
    setFilter((obj) => ({...obj, ...datObj})); // 可简化写法，直接展开datObj
  };
  

• 方法2：在更新函数内部打印新值
  如果只是想确认本次更新后的新状态，可以在函数式更新的回调里创建新对象并打印：

  const buttonClick = (data) => {
    let datObj = {
      year: 2022,
      month: 1
    };
    setFilter((obj) => {
      const newFilter = {...obj, ...datObj};
      console.log(newFilter); // 直接打印新创建的对象
      return newFilter;
    });
  };
  

补充说明： #

React会把状态更新操作加入队列，在组件重新渲染前批量处理，所以不要在调用setFilter后立刻尝试读取新状态。所有依赖新状态的逻辑，要么放在监听状态变化的useEffect中，要么在更新函数内部处理。

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