我的問題。我的狀態有時會顯示，如果我重繪 瀏覽器，更新代碼，我會得到以下錯誤 TypeError。不能讀取未定義的屬性（讀取'country'）我不確定為什么會出現這種行為。在一個例子中，它顯示，而另一個時候它不顯示。如果有任何解釋和解決方案，我們將不勝感激。

我的回應回傳了200狀態代碼，而且我控制臺.log的所有適當的資料都是合法的，所以我很困惑為什么會出現這個問題。

App.js

import api from ' ./api/fetchCovidData' 
import { useState, useEffect } from 'react' 

const App = (/span>) => {
  const [covid, setCovidData] = useState({})

  useEffect(() =>  {
    const fetchCovidData = async ( ) => {
      try{
        const response = await api.get('/cases?country=France'/span>) 。
        console.log(response.data)
        setCovidData(response.data) 。
      } catch (err) {
        if (err.response){
          //不在200回應范圍內。
          console.log(err.response.data) 。
          console.log(err.response.status) 。
          console.log(err.response.headers) 。
        } else {
          console.log（`Error: ${err.message}`）。)
        }
      }
    }
    fetchCovidData（）。
  }, []);

  return (
    <div> 
      <h1>{covid.All.country}</h1> 
      <h1>/span>{covid.All.population}</h1>/span>
    </div>/span>
  );
}

export default App;

fetchCovidData.js

import axios from "axios"/span>;

export default axios.create（{
    baseURL: 'https://covid-api.mmediagroup.fr/v1'。
});

回應示例

{
  "All"/span>: {
    "確認"。2604595,
    "recovered": 195365,
    "死亡": 62548,
    "國家": "法國"。
    "人口": 64979548,
    "sq_km_area": 551500,
    "life_expectancy": "78.8"。
    " elevation_in_meters": 375,
    "continent": "Europe",
    "縮略語": "FR"。
    "location": "西歐"。
    "iso": 250,
    "capital_city": "Paris",
    "lat": "46.2276",
    "long": "2.2137",
    "更新": "2020/12/26 12:21:56 00".
  }
}

uj5u.com熱心網友回復：

問題是你的初始狀態是空的。因此，你必須在使用前檢查狀態是否為空/未定義/空。

return (
    covid && covid.All && (<div> 
      <h1>{covid.All.country}</h1>/span>
      <h1>/span>{covid.All.population}</h1>/span>
    </div>)
  )

或者

<div>
   <h1>{covid?.All?.country}</h1> 
   <h1>{covid?.All?.population}</h1> 
</div>

uj5u.com熱心網友回復：

嘗試添加問號來驗證是否存在{covid?.All?.country}，另一個選擇是做一個條件

return (
        covid && (<div> 
          <h1>{covid?.All?.country}</h1>/span>
          <h1>{covid?.All?.population}</h1> 
        </div>)
      )

<script src="https://cdnjs. cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

import api from ' ./api/fetchCovidData' /span>
import { useState, useEffect } from 'react' 

const App = (/span>) => {
  const [covid, setCovidData] = useState({})

  useEffect(() =>  {
    const fetchCovidData = async ( ) => {
      try{
        const response = await api.get('/cases?country=France'/span>) 。
        console.log(response.data)
        setCovidData(response.data) 。
      } catch (err) {
        if (err.response){
          //不在200回應范圍內。
          console.log(err.response.data) 。
          console.log(err.response.status) 。
          console.log(err.response.headers) 。
        } else {
          console.log（`Error: ${err.message}`）。)
        }
      }
    }
    fetchCovidData（）。
  }, []);

  return (
    <div> 
      <h1>{covid?.All?.country}</h1>/span>
      <h1>{covid?.All?.population}</h1> 
    </div>/span>
  );
}

export default App; 

<script src="https://cdnjs. cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

uj5u.com熱心網友回復：

問題

但是你試圖在初始渲染時參考一個太深的層次，在真正你的狀態被填充之前：

<div>
  <h1>{covid.All.country}</h1> 
  <h1>{covid.All.population}</h1> 
</div>

<div>
  <h1>{covid.All?.country}</h1> 
  <h1>{covid.All?.population}</h1> 
</div>