无法从异步获取 React 获取值

Question

我做了一个 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 对象获取该内部对象我究竟做错了什么？

Answer 1

StockData最初是空对象，因此StockData.lastPrice将是未定义的。因此StockData.lastPrice.currentPrice就会出现错误。

在获取字段之前，您应该检查是否StockData.lastPrice未定义currentPrice。

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

Answer 2

首先是为什么它显示无法读取属性，因为每当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;