首页 > 解决方案 > 未定义的弹出窗口:声明了“案例”,但它的值永远不会被读取。ts(6133)

问题描述

我正在尝试将冠状病毒病例按国家/地区放在带有 geoJSON 和以下 api 的平面球地图上的弹出行 39 中:https ://corona.lmao.ninja/v3/covid-19/countries但是我的弹出窗口显示国家已选择,但不是我的国家的冠状病毒病例数,而是“未定义”

你有解决方案吗 ?

这是我的代码

    import React, { useEffect, useState} from 'react';
import axios from "axios";
import { Map, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./CovidMap.css";



const CovidMap = ({ countries }) => {
    const mapStyle = {
        fillColor: "white",
        weight: 1,
        color: "black",
        fillOpacity: 1,
    };

    const [latest, setLatest] = useState([]);

    // connexion API 
    useEffect(() => {
      axios
        .all([
           //donnees par pays 
          axios.get("https://corona.lmao.ninja/v3/covid-19/countries"),
     
          ])
          .then(responseArr => {
            setLatest(responseArr[0].data);
          })
          .catch(err => {
            console.log(err);
          });
     }, []);

   const onEachCountry = (country, layer)=> {
        layer.options.fillColor = country.properties.color;
        const name = country.properties.ADMIN; //parametrage popup pays 
        const cases = latest.cases;
        layer.bindPopup(`${name} ${cases}`);
    }

    return (
        <Map style={{ height: "90vh" }} zoom={2} center={[20, 100]}>
            <GeoJSON
                style={mapStyle}
                data={countries}
                onEachFeature={onEachCountry} />
        </Map>
    );
};

export default CovidMap;

标签: javascriptreactjsangularapi

解决方案


推荐阅读