React array.map错误

const MyComponent = ({ items }) => {
  if (!items) return <div>没有数据</div>;

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

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

{items.map(item => (
  <li key={item.id}>{item.name || '默认名称'}</li>
))}

const numbers = [1, 2, 3];
numbers.map(number => <li key={number}>{number}</li>); // 正确

const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/items')
      .then(response => response.json())
      .then(data => {
        setItems(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;

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

import React from 'react';

const ItemList = ({ items }) => {
  if (!items || items.length === 0) {
    return <div>没有项目可显示</div>;
  }

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

export default ItemList;