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）