如何在同一个onChange监听中setState后立即触发useEffect？

你遇到的核心问题是React的setState是异步操作：调用setFreeHours后，freeHours状态不会立刻更新，此时直接调用updateHours拿到的还是旧状态，且组件重新渲染未完成，导致useEffect的订阅未触发。下面给你两种实用的解决方法：

方法一：直接传递最新输入值给updateHours #

在onChange事件里先存储输入的新值，同时传给updateHours，无需等待状态更新。这样updateHours直接拿到最新值，绕开异步状态更新的问题：

<input
  type="number"
  value={freeHours}
  onChange={(event) => {
    const newHours = +event.target.value;
    setFreeHours(newHours);
    updateHours(newHours); // 直接传入最新值，无需等待状态更新
  }}
/>

方法二：利用useEffect监听状态变化（推荐） #

让useEffect依赖freeHours状态，移除onChange里的updateHours调用。每次setFreeHours完成、组件重新渲染后，useEffect会自动检测到状态变化并触发updateHours，完全符合React的状态管理逻辑：

import { useEffect } from 'react';

// 监听freeHours变化，自动触发订阅
useEffect(() => {
  updateHours(freeHours);
}, [freeHours]); // 依赖项设为freeHours，状态更新就执行

// 输入框只负责更新状态
<input
  type="number"
  value={freeHours}
  onChange={(event) => {
    setFreeHours(+event.target.value);
  }}
/>

如果你的updateHours必须接收null参数（比如内部逻辑依赖当前状态），可以调整useEffect的逻辑，比如在useEffect里调用updateHours(null)，此时freeHours已经是更新后的值，内部可正常获取。

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