React-使用从父组件传递的道具呈现子组件时出错

Question

我在创建react应用程序时遇到问题。我从CoinGecko API获取数据以构建加密跟踪应用程序，但当我将data道具从父App.js传递给子Info.js时。当我尝试呈现页面时，它会给我Info.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'large')。我真的不明白为什么会这样。

App.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>

同样的错误也发生在代码倒数第二行的市值中。CCD_ 5和CCD_。

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是一个空对象，因为Axios请求是在useEffect中调用的。在第一次渲染时，Info组件接收空的data对象。

解决问题的方法。

• 添加加载状态
• 或添加可选链接(data？.image？.lage(