首頁猿問無法從異步獲取 React 獲取值

無法從異步獲取 React 獲取值

JavaScript

胡說叔叔 2023-09-07 16:33:54

我做了一個 API fetch 來取回這些數據：{ "id": 1, "name": "Apple", "symbol": "AAPL", "lastPrice": { "id": 7, "currentPrice": 116.03, "openPrice": 115.55, "highPrice": 116.75, "lowPrice": 115.17, "previousClosePrice": 115.17, "timeOfRetrieval": "2020-11-26T19:04:35.150+00:00" }}這是我的反應代碼：function StockCard(props) { const [API, setAPI] = useState("http://localhost:8080/stock/getquote/AAPL") const [FetchInterval, setFetchInterval] = useState(300000) const [StockData, setStockData] = useState({}) useEffect(() => { FetchData(); const interval = setInterval(() => { FetchData(); }, FetchInterval) return() => clearInterval(interval); }, [FetchInterval]); const FetchData = async () =>{ console.log("FETCH CALLED"); const resp = await Axios.get(API); setStockData(resp.data); } return( <div> <div className='card-container' style={{background: 'linear-gradient(to top, #141e30, #243b55)', padding: '4rem 1rem'}}> <CryptoCard currencyName={StockData.name} currencyPrice={StockData.lastPrice.currentPrice} icon={<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/2000px-Bitcoin.svg.png"/>} currencyShortName={StockData.symbol} trend='(8.54%) $563.47' trendDirection={1} chartData={[9200, 5720, 8100, 6734, 7054, 7832, 6421, 7383, 8697, 8850]} /> </div> </div> )}export default StockCard;它說無法在這一行讀取未定義的屬性“currentPrice”：currencyPrice={StockData.lastPrice.currentPrice}如果我僅注銷 StockData，那么我會獲取值，但無法從原始 JSON 對象獲取該內部對象我究竟做錯了什么？

查看完整描述

2 回答

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

StockData最初是空對象，因此StockData.lastPrice將是未定義的。因此StockData.lastPrice.currentPrice就會出現錯誤。

在獲取字段之前，您應該檢查是否StockData.lastPrice未定義currentPrice。

<CryptoCard
          currencyName={StockData.name}
          currencyPrice={StockData.lastPrice? StockData.lastPrice.currentPrice : 0}
/>

反對回復 2023-09-07

叮當貓咪

TA貢獻1776條經驗獲得超12個贊

首先是為什么它顯示無法讀取屬性，因為每當react dom渲染它之前設置這個值，所以你只需要在這里添加快速檢查，如果值存在則渲染否則使用一些默認值。

用這個。

function StockCard(props) {

const [API, setAPI] = useState("http://localhost:8080/stock/getquote/AAPL")

const [FetchInterval, setFetchInterval] = useState(300000)

const [StockData, setStockData] = useState({})

useEffect(() => {

FetchData();

const interval = setInterval(() => {

FetchData();

}, FetchInterval)

return() => clearInterval(interval);

}, [FetchInterval]);

const FetchData = async () =>{

console.log("FETCH CALLED");

const resp = await Axios.get(API);

setStockData(resp.data);

}

const { lastPrice: {currentPrice}, name, symbol } = StockData || {};

return(

<div>

<CryptoCard

currencyName={name || ''}

currencyPrice={currentPrice || 0}

icon={<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/2000px-Bitcoin.svg.png"/>}

currencyShortName={symbol || ''}

trend='(8.54%) $563.47'

trendDirection={1}

chartData={[9200, 5720, 8100, 6734, 7054, 7832, 6421, 7383, 8697, 8850]}

</div>

)

}

export default StockCard;

反對回復 2023-09-07

2 回答
0 關注
150 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

無法從異步獲取 React 獲取值

無法從異步獲取 React 獲取值

2 回答

添加回答