reactjs中從API取數據出錯

Question

我正在嘗試使用 react useEffect 掛鈎從https://randomuser.me/api/獲取數據。 我得到的不是要顯示的數據，而是一個錯誤，“錯誤：對象作為 React 子項無效（找到：object，鍵為 {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;

Answer 1

item.location.street 是 object。

根據響應 API，這是街道 object。

"street": {
   "number": 4850,
   "name": "Rue Dumenge"
},

而不是渲染

<p>{item.location.street}</p>

你應該渲染類似

<p>{`${item.location?.street?.number} ${item.location?.street?.name}`}</p>