創建我的反應應用程式時遇到問題。我正在從 CoinGecko API 獲取資料以構建加密跟蹤應用程式，但是當我將dataprop 從 parentApp.js傳遞給 child時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="React - 使用從父組件傳遞的道具渲染子組件時出錯"
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"
}
.........
}
uj5u.com熱心網友回復：
SetData默認情況下是一個空物件，并且因為 Axios 請求在useEffect. 在第一個渲染Info組件上接收空data物件。
想辦法解決。
- 添加加載狀態。
- 或添加可選鏈接（data?.image?.large）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504135.html
標籤：javascript 反应 json 反应道具 反应儿童
上一篇：jQuery滑塊ui顯示值