如何在 React 中正确停止使用 useState 启动的异步循环任务-js教程-PHP中文网

如何在 React 中正确停止使用 useState 启动的异步循环任务

本文详解 React 中因闭包导致的 useState 状态滞后问题，介绍用 useRef 实时控制异步循环执行，并结合 AbortController 安全中止正在进行的 fetch 请求。

本文详解 react 中因闭包导致的 `usestate` 状态滞后问题，介绍用 `useref` 实时控制异步循环执行，并结合 `abortcontroller` 安全中止正在进行的 fetch 请求。

在 React 中，直接通过 useState 控制异步循环（如遍历 frequencyList 并逐个发起 fetch）的启停，常会遇到“点击停止无响应”的问题——根本原因在于：testFrequencyList 函数在调用时捕获的是初始渲染时的 stopTest 值（闭包），后续 setStopTest(true) 不会自动更新该函数内部引用的状态。

✅ 正确方案一：用 useRef 实现可变标志位

useRef 提供一个可变的、跨渲染保持引用不变的容器，其 .current 属性读写不触发重渲染，且在任何地方访问都能拿到最新值：

const stopRef = useRef(false);

const startTestFrequencyList = () => {
  if (frequenciesTestRunning) {
    setFrequenciesTestRunning(false);
    stopRef.current = true; // 立即生效，无闭包延迟
  } else {
    stopRef.current = false;
    setFrequenciesTestRunning(true);
    testFrequencyList();
  }
};

const testFrequencyList = async () => {
  for (const item of frequencyList) {
    // 每次迭代前实时检查 —— ref.current 总是最新值
    if (stopRef.current) {
      console.log("Test stopped by user");
      setFrequenciesTestRunning(false);
      return;
    }

    try {
      const response = await fetch('http://127.0.0.1:8000/frequency/testWithRe/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(item),
      });
      const testResult = await response.json();
      // 处理结果...
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        console.error('Request error:', error);
      }
    }
  }
  setFrequenciesTestRunning(false);
};

⚠️ 注意：useRef 解决了「循环逻辑是否继续」的问题，但无法中断已发出却尚未完成的 fetch 请求——它们仍会在后台运行，可能造成资源浪费或状态错乱。

React Native For Android 源码编译中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看

下载

✅ 正确方案二：配合 AbortController 中止进行中的网络请求

为真正取消 pending 的 fetch，需在每次请求中传入 signal，并在用户点击“停止”时调用 abort()：

const abortControllerRef = useRef<abortcontroller null>(null);

const startTestFrequencyList = () => {
  if (frequenciesTestRunning) {
    // 触发中止并重置
    abortControllerRef.current?.abort();
    abortControllerRef.current = null;
    setFrequenciesTestRunning(false);
  } else {
    abortControllerRef.current = new AbortController();
    setFrequenciesTestRunning(true);
    testFrequencyList();
  }
};

const testFrequencyList = async () => {
  for (const item of frequencyList) {
    if (stopRef.current || abortControllerRef.current?.signal.aborted) {
      setFrequenciesTestRunning(false);
      return;
    }

    try {
      const response = await fetch('http://127.0.0.1:8000/frequency/testWithRe/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(item),
        signal: abortControllerRef.current?.signal, // 关键：绑定中止信号
      });
      const testResult = await response.json();
      // 处理结果...
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Request was aborted');
        break; // 可选：立即退出整个循环
      }
      console.error('Fetch failed:', error);
    }
  }
  setFrequenciesTestRunning(false);
};</abortcontroller>