如何解决useEffect异步调用因props频繁变更导致的中间值闪烁问题

你遇到的是典型的React useEffect异步竞态问题——当依赖项频繁变更时，之前发起的异步请求完成后依然会更新状态，导致界面出现中间值闪烁。要实现只保留最后一次请求的结果，可以用以下两种方案：

方案一：用标志位+清理函数过滤无效更新 #

利用useEffect的清理函数，在每次新的effect触发时，标记之前的异步任务为"已失效"，任务完成后先检查标志位，只有当前任务有效时才更新状态。

修改后的代码：

const [text, setText] = useState("");

useEffect(() => {
  let isTaskValid = true; // 标记当前任务是否有效

  async function run() {
    const newText = await fetchText();
    await new Promise((r) => setTimeout(r, 2000));
    
    // 只有当前任务仍有效时，才更新状态
    if (isTaskValid) {
      setText(newText);
    }
  }

  run();

  // 清理函数：当依赖项变更或组件卸载时，标记任务失效
  return () => {
    isTaskValid = false;
  };
}, [some_prop]);

方案二：用AbortController取消未完成的请求 #

如果你的fetchText是基于浏览器原生fetch实现的，可以用AbortController直接取消之前未完成的请求，从根源上避免无效的状态更新。

修改后的代码：

const [text, setText] = useState("");

useEffect(() => {
  const abortController = new AbortController();
  const signal = abortController.signal;

  async function run() {
    try {
      // 把signal传入fetch请求，支持取消
      const newText = await fetchText(signal);
      await new Promise((r) => setTimeout(r, 2000));
      setText(newText);
    } catch (error) {
      // 请求被取消时会抛出AbortError，这里可以忽略这个错误
      if (error.name !== "AbortError") {
        console.error("请求失败:", error);
      }
    }
  }

  run();

  // 清理函数：取消之前的请求
  return () => {
    abortController.abort();
  };
}, [some_prop]);

注意：需要修改fetchText函数，让它接收signal参数并传递给fetch：

async function fetchText(signal) {
  const response = await fetch("/api/text", { signal });
  return response.text();
}

两种方案对比：

• 方案一简单通用，不管异步操作是请求还是其他耗时任务都能生效，但中间请求还是会完成，只是不更新状态。
• 方案二更高效，直接取消无效请求，节省网络资源，但需要异步操作支持取消机制（比如fetch、axios也支持AbortController）。

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