我尝试使用 react useEffect hook 从 https://randomuser.me/api/ 获取数据。我没有得到要显示的数据，而是收到一条错误，“错误：对象作为 React 子对象无效（找到：带有键 {number, name} 的对象）。如果您想要渲染子对象集合，请改用数组”。我在控制台上记录了结果，我意识到问题出在一些嵌套对象上，它们输出 [object Object]。但是，我不知道为什么其他一些嵌套对象可以正确显示。以下是我的代码：

import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import '../../App.css';

const UsersList = () => {

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

  useEffect(() => {
    fetch("https://randomuser.me/api/")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div>
        {items.map((item, id) => (
        <div className="card content-panel" key={id}>
          
          <img src={item.picture.medium} alt="Profile pic" className="avatar-user-list" />

          <div className="card-text">
            <p>
              {item.name.first} &nbsp; {item.name.last}
            </p>
            <p>{item.location.street}</p>
            <p>{item.email}</p>
          </div>

          <div className="arrow-bg">
            <span className="arrow">&#x2192;</span>
          </div>        
        </div>
        ))}
      </div>
    );
  }
}

export default UsersList;