React -将响应数据数组分配给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;