异步函数内循环中的React State无法更新问题求助

问题核心在于闭包特性：fetchData执行时会捕获当前的cancel状态值，后续调用setCancel更新状态后，这个异步函数里的cancel依然是最初捕获的旧值，自然无法响应状态变化。

用useRef就能解决这个问题，因为ref的.current属性是可变的，能在异步操作中实时拿到最新值：

具体修改方案 #

1. 替换或配合useState使用useRef保存取消状态：

   • 如果不需要状态变化触发组件重渲染，直接用useRef即可：

   import { useRef } from 'react';
   
   const cancelRef = useRef(false);
   const cancelFtn = () => {
     cancelRef.current = true;
   };
   

   • 如果需要状态变化触发组件重渲染，同时保留useState，同步更新ref：

   import { useState, useRef, useEffect } from 'react';
   
   const [cancel, setCancel] = useState(false);
   const cancelRef = useRef(false);
   
   useEffect(() => {
     cancelRef.current = cancel;
   }, [cancel]);
   
   const cancelFtn = () => {
     setCancel(true);
   };
   

2. 修改fetchData函数，读取cancelRef.current而非原cancel状态：

const fetchData = async () => {
  for (let i = 0; i < data.length; i++) {
    // 循环开始前先检查取消状态，提前终止不必要的请求
    if (cancelRef.current) {
      console.log("Cancelled");
      break;
    }

    const res = await fetch(putObjectSignedUrl, {
      method: "PUT",
      body: files[i],
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (res && !cancelRef.current) {
      await fetchInvoiceData(key);
    } else if (cancelRef.current) {
      console.log("Cancelled");
      break;
    }
  }
};

额外优化点 #

在每次循环迭代开始前就检查取消状态，能避免发起不必要的API请求，提升整体执行效率。

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