数组在使用酶呈现的组件中未定义？

import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState([]);

  // 其他逻辑...

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

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

function MyComponent() {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/items')
      .then(response => response.json())
      .then(data => {
        setItems(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

// 父组件
function ParentComponent() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return <MyComponent items={items} />;
}

// 子组件
function MyComponent({ items }) {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

function MyComponent({ items }) {
  return (
    <div>
      {items.map((item, index) => {
        if (index < items.length) {
          return <div key={index}>{item}</div>;
        }
        return null;
      })}
    </div>
  );
}