我正在使用 RapidAPI Api 在我的專案中加載加密貨幣資料。資料正在加載，甚至在我的 React 組件中呈現，但是一旦我重繪 ，我必須從頭開始加載資料以獲取特定的硬幣資料。重新加載時，我收到TypeError：無法讀取未定義的屬性（讀取“名稱”）
這是我的代碼：
import React, { useState, useEffect } from "react";
import "./Homepage.css";
import CryptoCard from "../Card/Card";
import axios from "axios";
const Homepage = () => {
const [coinData, setCoinData] = useState([]);
useEffect(() => {
const i = 5;
const options = {
method: "GET",
url: "https://coinranking1.p.rapidapi.com/exchanges",
headers: {
"x-rapidapi-host": "coinranking1.p.rapidapi.com",
"x-rapidapi-key": "REDACTED",
},
};
axios
.request(options)
.then((response) => {
setCoinData(response.data.data.exchanges);
// console.log(coinData);
// console.log("Working!!");
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<div className="homepage">
<div className="heading">
<h1>Discover {coinData[0].name}</h1>
<hr className="line" />
</div>
<div className="cards-container">
<CryptoCard />
</div>
</div>
);
};
export default Homepage;
為什么我得到
uj5u.com熱心網友回復：
錯誤資訊的原因
coinData[0]最初渲染組件時不存在。您已將其定義為useState([])，因此每次創建組件時，您都會從一個新的空陣列開始。因此，如果您有一些資料，您應該添加一個檢查。
<h1>Discover {coinData.length > 0 && coinData[0].name}</h1>
重新獲取的原因
useEffect當組件被渲染時，你將被執行一次。您發出請求并將資料放入coinData狀態。但狀態不是持久的。您可以使用本地存盤在頁面重繪 時快取您的請求。為此，您需要在請求完成時保留資料并在創建狀態時加載資料。
const [coinData, setCoinData] = useState([], () => {
const localData = localStorage.getItem('coinData');
return localData ? JSON.parse(localData) : [];
});
useEffect(() => {
const i = 5;
const options = {
method: "GET",
url: "https://coinranking1.p.rapidapi.com/exchanges",
headers: {
"x-rapidapi-host": "coinranking1.p.rapidapi.com",
"x-rapidapi-key": "REDACTED",
},
};
axios
.request(options)
.then((response) => {
setCoinData(response.data.data.exchanges);
// console.log(coinData);
// console.log("Working!!");
// persist in localStorage
localStorage.setItem("coinData", JSON.stringify(response.data.data.exchanges))
})
.catch((error) => {
console.error(error);
});
}, []);
編輯：每次點擊重繪 時，這仍然會發出請求，但我想這段代碼會清楚地說明它是如何作業的。所以我想你可以添加一個 if 條件，如果你已經有了一些資料并跳過新的請求 ;-)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/343495.html