React应用AsyncButton问题：组件卸载后异步函数无法更新按钮状态

问题原因 #

组件卸载后，React会忽略该组件实例的setState调用，所以异步任务完成时执行的setState(false)和storeInMemory({ asyncState: false })不会生效。当用户返回视图重新挂载组件时，读取的是之前存在sessionStorage中的true值，导致按钮一直显示加载状态。

解决思路 #

通过跟踪组件的挂载状态，确保只有组件处于挂载状态时，才执行状态更新和存储操作；若异步任务支持取消，还可以在组件卸载时终止任务，避免不必要的资源消耗。

代码实现 #

1. 跟踪组件挂载状态

使用useRef存储组件的挂载状态，在组件卸载时通过useEffect的清理函数标记为未挂载：

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

// ...

const isMounted = useRef(true);

useEffect(() => {
  return () => {
    // 组件卸载时标记为未挂载
    isMounted.current = false;
  };
}, []);

// 初始化状态简化写法
const [state, setState] = useState(() => getFromMemory('asyncState') ?? false);

const onClick = async () => {
  setState(true); 
  storeInMemory({ asyncState: true });
  try {
    await props.asyncTask();
    // 仅当组件仍挂载时更新状态和存储
    if (isMounted.current) {
      setState(false);
      storeInMemory({ asyncState: false });
    }
  } catch (error) {
    // 错误处理：即使任务失败，也恢复按钮状态
    if (isMounted.current) {
      setState(false);
      storeInMemory({ asyncState: false });
    }
    // 可添加错误提示等逻辑
    console.error('异步任务执行失败:', error);
  }
};

2. 可选：取消异步任务（若支持）

如果props.asyncTask支持AbortController，可以在组件卸载时终止任务，减少无效的异步操作：

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

// ...

const isMounted = useRef(true);
const abortController = useRef(new AbortController());

useEffect(() => {
  const controller = abortController.current;
  return () => {
    isMounted.current = false;
    controller.abort(); // 取消异步任务
  };
}, []);

const [state, setState] = useState(() => getFromMemory('asyncState') ?? false);

const onClick = async () => {
  // 每次点击创建新的AbortController，避免取消旧任务影响新任务
  abortController.current = new AbortController();
  const controller = abortController.current;

  setState(true); 
  storeInMemory({ asyncState: true });
  try {
    // 假设asyncTask接收signal参数
    await props.asyncTask({ signal: controller.signal });
    if (isMounted.current) {
      setState(false);
      storeInMemory({ asyncState: false });
    }
  } catch (error) {
    // 忽略任务取消的错误
    if (error.name !== 'AbortError') {
      if (isMounted.current) {
        setState(false);
        storeInMemory({ asyncState: false });
      }
      console.error('异步任务执行失败:', error);
    }
  }
};

关键说明 #

• useRef的isMounted不会触发组件重渲染，适合用来跟踪组件生命周期状态
• 异步任务完成后先检查挂载状态，避免在组件卸载后执行无效操作，同时保证sessionStorage中的状态与组件实际状态一致
• 使用AbortController取消任务能更高效地终止不必要的异步请求，避免资源浪费

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