状态更改时重新呈现返回空白

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

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

  useEffect(() => {
    // 模拟异步数据获取
    setTimeout(() => {
      setData('New Data');
    }, 1000);
  }, []);

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

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

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

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

  fetchData();
}, []);

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

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 fetching data:', error);
    }
  };

  fetchData();

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