时间戳

首页 > 解决方案 > 在使用 axios 从 API 获取数据方面需要帮助

reactjs - 在使用 axios 从 API 获取数据方面需要帮助

问题描述

最近学习了使用 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的新手，提前谢谢

标签： reactjsaxios

解决方案

您正在创建一个空数组：

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 结果之前，您不能使用它，此时更新状态将触发组件重新渲染数据。

推荐阅读