`Warning: Can't perform a React state update on an unmounted component` 警告

在使用 React 时遇到 Warning: Can't perform a React state update on an unmounted component 警告，这表明你的代码尝试在一个组件已经卸载（unmounted）后更新其状态。这种情况通常会导致内存泄漏，因为 React 无法正确清理这些操作。警告提示我们需要在组件卸载时取消所有订阅和异步任务，通常通过 useEffect 的清理函数来实现。

问题原因

异步操作未取消：组件发起了一个异步任务（如 API 请求、定时器或事件监听），但在异步任务完成前组件已经卸载，回调函数仍然尝试更新状态。
未正确清理副作用：在 useEffect 或其他副作用钩子中，订阅或异步任务没有在组件卸载时被清理。
条件渲染导致卸载：组件被条件渲染移除（如通过 if 或路由切换），但之前的异步操作仍在进行。

解决方案

1. 使用清理函数（useEffect cleanup）

在 useEffect 中添加清理逻辑，确保在组件卸载时取消异步任务或订阅。

示例：带有异步请求的组件

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true; // 标记组件是否已挂载

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        if (isMounted) {
          setData(result); // 只有在组件仍挂载时更新状态
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();

    // 清理函数
    return () => {
      isMounted = false; // 组件卸载时标记为 false
    };
  }, []); // 空依赖数组表示只在挂载时运行

  return <div>{data ? data.message : 'Loading...'}</div>;
}

export default MyComponent;

2. 使用 AbortController 取消异步请求

对于 fetch 请求，可以使用 AbortController 在组件卸载时取消请求。

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        const result = await response.json();
        setData(result);
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error(error);
        }
      }
    };

    fetchData();

    // 清理函数
    return () => {
      controller.abort(); // 取消请求
    };
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

3. 清理定时器或间隔任务

如果使用了 setTimeout 或 setInterval，确保在组件卸载时清除它们。

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

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // 清理函数
    return () => {
      clearInterval(timer); // 清除定时器
    };
  }, []);

  return <div>Count: {count}</div>;
}

4. 检查事件监听器

如果添加了事件监听器（如 window.addEventListener），需要在卸载时移除。

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

function WindowResizeComponent() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Window width: {width}px</div>;
}

5. 检查条件渲染逻辑

如果组件通过条件渲染被卸载，确保异步任务在卸载后不会尝试更新状态。

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

function ParentComponent() {
  const [showChild, setShowChild] = useState(true);

  return (
    <div>
      <button onClick={() => setShowChild(false)}>隐藏子组件</button>
      {showChild && <ChildComponent />}
    </div>
  );
}

function ChildComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    setTimeout(() => {
      if (isMounted) {
        setData('Loaded');
      }
    }, 2000);

    return () => {
      isMounted = false;
    };
  }, []);

  return <div>{data || 'Loading...'}</div>;
}

结合 Arco Design 的具体场景

如果你在使用 Arco Design 的组件（如 Modal、Table 等）时遇到此问题，可能是因为 Modal 中的异步操作没有正确清理。以下是一个修复后的示例：

import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Table } from '@arco-design/web-react';

const ListWithModal = () => {
  const [dataSource, setDataSource] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingItem, setEditingItem] = useState(null);
  const [form] = Form.useForm();

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      const response = await fetch('/api/list');
      const data = await response.json();
      if (isMounted) {
        setDataSource(data);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, []);

  const handleSubmit = async (values) => {
    await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步请求
    if (editingItem) {
      setDataSource(dataSource.map(item => 
        item.id === editingItem.id ? { ...item, ...values } : item
      ));
    } else {
      setDataSource([...dataSource, { id: Date.now(), ...values }]);
    }
    setIsModalVisible(false);
    form.resetFields();
    setEditingItem(null);
  };

  const columns = [
    { title: '名称', dataIndex: 'name' },
    {
      title: '操作',
      render: (_, record) => (
        <Button onClick={() => {
          setEditingItem(record);
          form.setFieldsValue(record);
          setIsModalVisible(true);
        }}>编辑</Button>
      ),
    },
  ];

  return (
    <div>
      <Button onClick={() => setIsModalVisible(true)}>新增</Button>
      <Table dataSource={dataSource} columns={columns} rowKey="id" />
      <Modal
        title={editingItem ? '编辑' : '新增'}
        visible={isModalVisible}
        onCancel={() => {
          setIsModalVisible(false);
          form.resetFields();
          setEditingItem(null);
        }}
        footer={null}
      >
        <Form form={form} onFinish={handleSubmit} layout="vertical">
          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ListWithModal;

排查步骤

查看警告的堆栈信息：找到具体的组件和状态更新位置。
检查异步操作：确认是否有 setTimeout、fetch、事件监听等未清理的操作。
添加清理逻辑：在每个 useEffect 中添加返回的清理函数。
测试卸载场景：通过条件渲染或路由切换测试组件卸载时的行为。

总结

这个警告的核心解决方法是通过 useEffect 的清理函数取消所有副作用（如异步请求、定时器、事件监听等）。结合你的具体代码（例如 Arco Design 的 Modal 或 Table），确保在组件卸载时正确处理状态更新逻辑。