React技术问询：异步API场景下useEffect后如何重置状态

你的核心需求是：点击按钮发起异步API请求，加载时显示模态框；点击取消后终止请求、不打开新页面，且所有状态重置，保证下次点击按钮能正常重复流程。原代码存在以下几个关键问题：

• 模拟API请求时未使用异步等待，导致apiRequestSuccessful被立即设为true，完全不符合真实异步场景
• 依赖useEffect监听状态变化来打开新页面，逻辑冗余且容易出现状态不同步
• 状态重置不彻底，取消或请求完成后未重置apiRequestSuccessful，导致后续操作异常
• 未处理API请求的中止逻辑，真实场景中取消按钮点击后应该中断正在进行的请求

解决方案 #

• 用AbortController处理请求中止：真实项目中必须用它来中断Fetch或Axios请求，模拟场景也可以用它标记取消状态
• 调整异步逻辑：将模拟API改为返回Promise的函数，用await等待请求完成
• 简化状态触发逻辑：直接在API请求完成后判断是否取消，无需依赖useEffect
• 完善状态重置：在按钮点击、请求完成、取消操作时，都重置相关状态，保证流程可重复

修改后的代码 #

import React, { useState, useRef } from 'react';

// 模拟异步API请求，支持中止
const mockApiCall = (signal) => {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      console.log("API调用完成");
      resolve();
    }, 3000);

    // 如果收到中止信号，清除定时器并标记请求取消
    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new Error("请求已取消"));
    });
  });
};

export default function NewApp(props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 用ref保存控制器实例，方便取消时调用
  const abortControllerRef = useRef(null);

  const handleButtonClick = async () => {
    // 重置状态和控制器
    setIsModalOpen(true);
    abortControllerRef.current = new AbortController();

    try {
      // 发起API请求，传入中止信号
      await mockApiCall(abortControllerRef.current.signal);
      // 请求完成且未被取消，打开新页面
      window.open('https://example.com', '_blank');
    } catch (error) {
      // 仅处理非取消类错误
      if (error.name !== 'AbortError') {
        console.error('API请求失败', error);
      }
    } finally {
      // 无论结果如何，关闭模态框并重置控制器
      setIsModalOpen(false);
      abortControllerRef.current = null;
    }
  };

  const handleCancelClick = () => {
    // 中止正在进行的API请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    // 关闭模态框
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Button A</button>
      {isModalOpen && (
        <Modal onCancel={handleCancelClick} />
      )}
    </div>
  );
};

const Modal = ({ onCancel }) => {
  return (
    <div className="modal">
      <p>Api call is being made...</p>
      <button onClick={onCancel}>Cancel</button>
    </div>
  );
};

关键改动说明 #

• 移除冗余状态：删掉了apiRequestSuccessful和isCancelClicked，用AbortController直接处理取消逻辑，更简洁可靠
• 真实异步模拟：mockApiCall返回Promise，支持通过中止信号中断请求，贴合真实API调用场景
• 流程闭环：在finally块中统一处理模态框关闭和控制器重置，保证无论请求成功、失败还是取消，状态都能正确重置
• 取消逻辑直接：点击取消按钮时直接调用abort()中断请求，无需依赖状态变化触发后续操作，避免异步状态不同步问题

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