React中Fetch数据更新State时保存旧值的问题排查

问题本质 #

你遇到的不是state保存旧数据的异常，而是React的useState更新是异步的，且当前回调函数的闭包捕获的是更新前的newqid值。所以调用setNewQid后立刻打印newqid，拿到的永远是本次更新前的旧值：

• 首次点击时，初始newqid为undefined，调用setNewQid(1)后，当前闭包里的newqid还是undefined，因此打印结果为undefined；
• 再次点击时，闭包捕获的是上次更新后的1，调用setNewQid(2)后，打印的依旧是1。

但实际上setNewQid已经正确将state更新为接口返回的最新值，只是打印时机不对。

解决办法 #

1. 直接打印接口返回的原始数据

如果只是验证接口返回和设置是否正确，直接打印接口返回的data[0].QuestId即可，这就是要设置的最新ID：

.then((data) => {
  const newId = data[0].QuestId;
  setNewQid(newId);
  console.log("Newqid " + newId); // 此处会打印最新的ID
})

2. 用useEffect监听state变化

如果需要在state更新后执行后续逻辑（比如打印、业务操作），可以使用useEffect监听newqid，它会在newqid更新后触发：

import { useState, useEffect } from 'react';

const [newqid, setNewQid] = useState();

// 监听newqid的变化
useEffect(() => {
  if (newqid !== undefined) {
    console.log("Updated Newqid: " + newqid);
    // 这里可以编写state更新后的业务逻辑
  }
}, [newqid]); // 依赖项为newqid，仅当它变化时执行

// 你的fetch请求代码保持不变
fetch("http://testapi/quest", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    ExId: exid,
    Quest: quest,
  }),
})
  .then((res) => res.json())
  .then(
    (data) => {
      setNewQid(data[0].QuestId);
    },
    (error) => {
      alert("Failed" + error);
    },
  );

3. 组件渲染时直接使用最新值

在组件的JSX或其他渲染逻辑中，newqid会自动使用更新后的值，比如：

return <div>最新创建的ID：{newqid}</div>;

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