我最近學習了使用 axios 從 REST API 獲取資料，但是我遇到了一個問題。所以我想從 API 中獲取一些資料，這是我的代碼：
import {useState, useEffect} from 'react'
import axios from 'axios'
import { Popup, GeoJSON } from 'react-leaflet'
import '../Map.css'
const GradientMap = () => {
const [data, setData] = useState([]);
useEffect(()=>{
getData();
})
const getData = async ()=>{
const response = await axios.get('http://localhost:5000/in-data')
setData(response.data)
}
const getColor = (name)=>{...
}
return (
<div>
<GeoJSON data={CIKARANG_UTARA} style={{color: getColor(CIKARANG_UTARA.features[0].properties.Name)}}>
<Popup>
{CIKARANG_UTARA.features[0].properties.Name} <br/> Total Weight: {data[0].Total_Weight}
</Popup>
</GeoJSON>
<GeoJSON data={CIKARANG_BARAT} style={{color: getColor(CIKARANG_BARAT.features[0].properties.Name)}}>
<Popup>
{CIKARANG_BARAT.features[0].properties.Name} <br/> Total Weight: {data[1].Total_Weight}
</Popup>
</GeoJSON>
<GeoJSON data={CIKARANG_TIMUR} style={{color: getColor(CIKARANG_TIMUR.features[0].properties.Name)}}>
<Popup>
{CIKARANG_TIMUR.features[0].properties.Name} <br/> Total Weight: {data[2].Total_Weight}
</Popup>
</GeoJSON>
<GeoJSON data={SUKATANI} style={{color: getColor(SUKATANI.features[0].properties.Name)}}>
<Popup>
{SUKATANI.features[0].properties.Name} <br/> Total Weight: {data[3].Total_Weight}
</Popup>
</GeoJSON>
<GeoJSON data={CIBITUNG} style={{color: getColor(CIBITUNG.features[0].properties.Name)}}>
<Popup>
{CIBITUNG.features[0].properties.Name} <br/> Total Weight: {data[4].Total_Weight}
</Popup>
</GeoJSON>
</div>
)
}
export default GradientMap
錯誤在 data[0].Total_Weight 中，它在我保存檔案時起作用，但是在我重新加載瀏覽器后它變成了一個錯誤，我嘗試執行 console.log(data) 并回傳一個空陣列。API 作業正常，這是回應：
[
{
"Area": "CIKARANG UTARA",
"Total_Weight": 283,
"Total_OR_Weight": 135,
"Total_IN_Weight": 148
},
{
"Area": "CIKARANG BARAT",
"Total_Weight": 0,
"Total_OR_Weight": 0,
"Total_IN_Weight": 0
},
]
下面是瀏覽器多載前的情況（可以看到，沒有報錯，總重量獲取成功）：
這是重新加載瀏覽器后的情況：
我不知道該怎么辦，我是 react 和 axios 的新手，提前致謝
uj5u.com熱心網友回復：
您正在創建一個空陣列：
const [data, setData] = useState([]);
然后嘗試從該空陣列中讀取第一個值：
Total Weight: {data[0].Total_Weight}
由于陣列為空，該陣列的第一個元素是undefined。
您可以做的是有條件地不渲染元素，直到陣列具有值。例如：
return (
data.length > 0 ?
<div>
... the rest of your HTML
</div> :
<div>Loading...</div>
);
在獲取 API 資料時，您可以將“加載”元素替換為您想在頁面上顯示的任何內容。但是在獲取 API 結果之前您不能使用它，此時更新狀態將觸發組件重新渲染資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345879.html
上一篇：光滑滑塊幻燈片內的中心專案