使用useEffect时状态变为空

useEffect(() => {
  // 副作用代码
}, [dependencies]);

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

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

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

    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/data/${id}`);
        const result = await response.json();
        if (isMounted) {
          setData(result);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, [id]); // 依赖于 id，当 id 变化时重新获取数据

  return (
    <div>
      {data ? (
        <div>{/* 渲染数据 */}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default MyComponent;