2 回答

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
StockData
最初是空對(duì)象,因此StockData.lastPrice
將是未定義的。因此StockData.lastPrice.currentPrice
就會(huì)出現(xiàn)錯(cuò)誤。
在獲取字段之前,您應(yīng)該檢查是否StockData.lastPrice
未定義currentPrice
。
<CryptoCard currencyName={StockData.name} currencyPrice={StockData.lastPrice? StockData.lastPrice.currentPrice : 0} />

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
首先是為什么它顯示無法讀取屬性,因?yàn)槊慨?dāng)react dom渲染它之前設(shè)置這個(gè)值,所以你只需要在這里添加快速檢查,如果值存在則渲染否則使用一些默認(rèn)值。
用這個(gè)。
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>
<div className='card-container' style={{background: 'linear-gradient(to top, #141e30, #243b55)', padding: '4rem 1rem'}}>
<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>
</div>
)
}
export default StockCard;
添加回答
舉報(bào)