React -将响应数据数组分配给useEffect挂钩中的状态后，将其清除

在React中，useEffect 是一个用于处理副作用的钩子，它允许你在组件渲染后执行某些操作，并且在组件卸载或依赖项变化时执行清理操作。如果你在 useEffect 中将响应数据数组分配给状态，并且希望在组件卸载时清除这些数据，你可以通过返回一个清理函数来实现。

基础概念

useEffect: 这是一个React钩子，用于在组件渲染后执行副作用操作。
状态管理: 在React中，状态是用来存储和管理组件内部数据的。
清理函数: useEffect 可以返回一个函数，这个函数会在组件卸载时执行，用于清理副作用。

类型

数据获取: 在组件挂载后获取数据并更新状态。
事件监听: 添加事件监听器并在组件卸载时移除。
定时器: 设置定时器并在组件卸载时清除。

应用场景

组件卸载时的资源释放: 如移除事件监听器、清除定时器等。
避免状态污染: 当组件重新挂载时，确保状态是干净的。

示例代码

以下是一个使用 useEffect 来获取数据并在组件卸载时清除状态的示例：

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

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

  useEffect(() => {
    // 假设 fetchData 是一个异步函数，用于获取数据
    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 fetching data:', error);
      }
    };

    fetchData(); // 调用 fetchData 函数

    // 清理函数
    return () => {
      isMounted = false; // 组件卸载时，设置标志为 false
      setData([]); // 清除状态中的数据
    };
  }, []); // 空依赖数组确保这个 useEffect 只在组件挂载和卸载时执行

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

export default MyComponent;