组件重新呈现时数组为空

const [items, setItems] = useState([]);

useEffect(() => {
  // 模拟异步数据获取
  setTimeout(() => {
    setItems([/* 数据 */]);
  }, 1000);
}, []);

const [items, setItems] = useState([]);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('https://api.example.com/items')
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    })
    .then(data => setItems(data))
    .catch(error => setError(error.message));
}, []);

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

function ItemList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/items');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setItems(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ItemList;