React Hooks问题：如何在useState状态更新完成后执行特定逻辑？

DevOps 小满

2026-5-9

嘿，这个问题我太熟悉了！React的useState更新确实是异步的（而且在批量更新场景下会合并执行），所以你在调用setData之后立刻打印data，拿到的肯定还是更新前的旧状态——这就是你看到两次[]的原因。

下面给你两种最常用的解决方案，按需选择：

方案1：用`useEffect`监听状态变化

这是处理「状态更新后执行逻辑」最通用的做法。我们可以把需要在data更新后执行的逻辑，放到一个依赖data的useEffect里，只要data的引用发生变化（也就是状态完成更新），这个effect就会自动触发：

const [data, setData] = useState([])

useEffect(() => {
  const getData = async () => {
    const res = await fetchData()
    setData(res.data.hits);
  }
  getData()
}, [fetchData]);

// 专门监听data的变化，状态更新后执行这里的逻辑
useEffect(() => {
  // 这里可以拿到最新的data
  if (data.length > 0) {
    console.log("最新的data：", data);
    // 在这里执行你需要的特定逻辑，比如处理数据、更新其他状态等
  }
}, [data]); // 依赖数组里放data，确保只有data变化时才触发

方案2：直接使用接口返回的原始数据

如果你的特定逻辑不需要依赖React状态，只是需要用到刚获取到的数据，那完全没必要等setData完成——直接用接口返回的res.data.hits就行，因为你已经在异步函数里拿到了这个值：

const [data, setData] = useState([])

useEffect(() => {
  const getData = async () => {
    const res = await fetchData()
    const newData = res.data.hits;
    setData(newData);
    // 直接用newData执行逻辑，不用等state更新
    console.log("新数据：", newData);
    // 这里写你的特定逻辑，比如过滤数据、调用其他API等
  }
  getData()
}, [fetchData]);