javascript - 未定义的弹出窗口:声明了“案例”,但它的值永远不会被读取。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;
解决方案
推荐阅读
- mongodb - 如何在 MongoDB 中使用 ObjectId 搜索文档(Anypoint Studio)
- wagtail - 如何打包 Wagtail 的 fork 进行安装?
- c# - 安装 Microsoft.Net.Test.Sdk 未修复“无法找到 testhost.dll。请发布您的测试项目并重试。” - 还有什么我可以做的吗?
- javascript - 有没有办法让父链接排除一些子元素?
- node.js - 如何使用 .map() 和 mongoDB 调用修复 MERN 中的异步等待
- r - 对于同一个变量,有什么方法可以区别对待 NA 吗?
- python - 如何在熊猫中对不规则时间间隔执行滚动平均?
- android - 应用程序未在后台运行时未收到推送通知
- angular - 如何使用 Angular Universal ssr 添加谷歌分析跟踪
- regex - 使用自定义函数查找列中的所有单词