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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法從異步獲取 React 獲取值

無法從異步獲取 React 獲取值

胡說叔叔 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>

        <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;


查看完整回答
反對 回復 2023-09-07
  • 2 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號