React - 使用從父組件傳遞的道具渲染子組件時出錯

Question

創建我的反應應用程序時遇到問題。 我正在從 CoinGecko API 獲取數據以構建加密跟蹤應用程序，但是當我將data道具從父App.js傳遞給子Info.js 。 當我嘗試渲染頁面時，它給了我Info.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'large') 。 我真的不明白為什么會這樣。

應用程序.js

function App() {
  const [isToggled, setIsToggled] = useState(false);
  const [data, setData] = useState({});
  const [coin, setCoin] = useState("bitcoin");

  const getData = () => {
    axios({
      method: "GET",
      url: `https://api.coingecko.com/api/v3/coins/${coin}?localization=en`,
    })
      .then((response) => {
        console.log(response.data);
        setData(response.data);
        
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getData(coin);
  }, []);

  return (
    <div>
      <HeaderContainer />
      <Search getData={getData} coin={coin} setCoin={setCoin} />
      <Info mcap={mcap} data={data} />
    </div>
  );
}

Info.js

function Info({ image, mcap, data }) {
 return (
    <div className="info-container">
      <div className="left-column">
        <div className="top-row">
          <div className="coin-icon-container">
            <img
              className="coin-icon"
              src={data.image.large}
              alt="coin logo"
              width="40px"
              height="40px"
            ></img>
          </div>
          <div className="coin-name-container">
            <p className="coin-name">{data.name}</p>
            <p className="coin-abbr">{data.symbol}</p>
          </div>
          <div className="coin-MCAP-details">
            <p className="coin-position">#{data.market_cap_rank}</p>
            <p className="coin-MCAP">{data.market_data.market_cap.usd}</p>
          </div>

在倒數第二行代碼中的市值也會出現同樣的錯誤。 data.name和data.symbol正確呈現。

response.json文件很長，所以我只放重要部分：

響應.json

{
    "id": "bitcoin",
    "symbol": "btc",
    "name": "Bitcoin",
    "asset_platform_id": null,
     .......
    "image":{
    "thumb": "https://assets.coingecko.com/coins/images/1/thumb/bitcoin.png?1547033579",
    "small": "https://assets.coingecko.com/coins/images/1/small/bitcoin.png?1547033579",
    "large": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579"
    }
    .........
}

Answer 1

SetData默認是一個空的 object，因為 Axios 請求在useEffect中被調用。 在第一個渲染Info組件接收空data object。

想辦法解決。

• 添加加載 state。
• 或添加可選鏈接（data?.image?.large）