React更新state后传递给函数时获取旧值该如何解决？

React 中的状态更新是批量异步执行的，调用setState后不会立刻修改当前作用域下的state变量，而是会将更新任务加入队列，等当前同步逻辑执行完毕后再统一更新状态。所以你在setState后立刻调用dataValidation(state)时，拿到的始终是更新前的旧状态。

方法1：直接传入新构造的状态值（最简单） #

你可以先构造好更新后的状态对象，同时传给setState和校验函数，完全不需要依赖状态更新时机：

const handleInputChange = (e) => {
  // 先构造完整的新状态对象
  const updatedState = { ...state, [e.target.name]: e.target.value };
  setState(updatedState);
  // 直接传新对象做校验，不用等state更新
  dataValidation(updatedState);
};

方法2：用useEffect监听状态变化触发校验 #

如果你的校验逻辑需要严格依赖状态更新完成后执行，可以把校验逻辑放到useEffect中，监听日期相关状态的变化，状态更新后会自动触发校验：

// 监听开始、结束日期的变化，更新后自动执行校验
useEffect(() => {
  dataValidation(state);
}, [state.startDate, state.endDate]);

// 输入处理函数可以简化，不需要再单独调用校验
const handleInputChange = (e) => {
  // 这里用函数式更新可以避免闭包导致的旧状态问题，更稳妥
  setState(prev => ({ ...prev, [e.target.name]: e.target.value }));
};

类组件场景方案 #

如果你用的是类组件，可以直接用setState的第二个回调参数，该回调会在状态更新完成后执行：

handleInputChange = (e) => {
  this.setState(
    { ...this.state, [e.target.name]: e.target.value },
    // 回调中拿到的是更新完成后的最新状态
    () => this.dataValidation(this.state)
  )
}

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