React异步函数运行中State不更新问题求助

这核心是React闭包特性导致的，和state异步更新有间接关联，但本质是已启动的async函数捕获了state的初始值，后续state更新无法影响到这个已经在运行的函数。

具体原因 #

当你调用async函数并进入await API.data.fetch等待阶段时，函数会捕获当前作用域下的notify state值（初始为false）。之后用户点击按钮触发setNotify(true)，组件会重新渲染，但已经在运行的async函数仍然持有之前捕获的旧notify值——它不会重新读取最新的state。所以当请求完成后，判断的还是初始的false，始终执行跳转逻辑。

解决思路 #

1. 使用useRef存储操作选择

useRef的.current属性是可变的，不会被闭包捕获固定值，能随时获取最新状态：

import { useRef } from 'react';

// 定义ref替代state存储选择
const notifyRef = useRef(false);

// 按钮点击时更新ref
<button onClick={() => notifyRef.current = true}>Click me</button>

// 请求逻辑中使用ref的最新值
const fetchData = async () => {
  const data = await API.data.fetch(entities, Id);
  if (notifyRef.current) {
    sendNotifcation({
      message: 'Data loaded successfully',
      duration: 5000,
      Icon: <FaCheckCircle size={35} className="text-green-d" />
    });
    // 可选：执行后重置ref，避免下次请求复用状态
    notifyRef.current = false;
  } else {
    redirectToPage(data._id);
  }
};

2. 拆分请求与结果处理逻辑（推荐）

将请求结果和用户选择的操作分开，用状态跟踪请求完成状态，再通过useEffect监听最新的state执行对应操作：

import { useState, useEffect } from 'react';

const [notify, setNotify] = useState(false);
const [loadedData, setLoadedData] = useState(null);

// 仅负责发起请求、存储结果
const fetchData = async () => {
  const data = await API.data.fetch(entities, Id);
  setLoadedData(data);
};

// 监听数据加载状态，基于最新的notify执行操作
useEffect(() => {
  if (loadedData) {
    if (notify) {
      sendNotifcation({
        message: 'Data loaded successfully',
        duration: 5000,
        Icon: <FaCheckCircle size={35} className="text-green-d" />
      });
    } else {
      redirectToPage(loadedData._id);
    }
    // 重置状态，避免重复触发
    setLoadedData(null);
  }
}, [notify, loadedData]);

// 组件渲染部分
return (
  <>
    <button onClick={() => setNotify(true)}>Click me</button>
    <button onClick={fetchData}>发起请求</button>
  </>
);

3. 可选：取消旧请求（适合复杂场景）

如果需要严格基于用户最新选择处理，可以用AbortController取消当前请求，当用户点击按钮时重新发起请求，确保逻辑基于最新state：

import { useState, useRef } from 'react';

const [notify, setNotify] = useState(false);
const abortControllerRef = useRef(null);

const fetchData = async () => {
  // 取消之前未完成的请求
  if (abortControllerRef.current) {
    abortControllerRef.current.abort();
  }
  const controller = new AbortController();
  abortControllerRef.current = controller;

  try {
    const data = await API.data.fetch(entities, Id, { signal: controller.signal });
    // 这里的notify是最新的，因为请求是在点击按钮后重新发起的
    notify ? sendNotifcation({
      message: 'Data loaded successfully',
      duration: 5000,
      Icon: <FaCheckCircle size={35} className="text-green-d" />
    }) : redirectToPage(data._id);
  } catch (err) {
    // 处理请求取消的错误
    if (err.name !== 'AbortError') {
      console.error('请求失败', err);
    }
  }
};

// 按钮点击更新state并重新发起请求
<button onClick={() => {
  setNotify(true);
  fetchData();
}}>Click me</button>

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