我正在制作一个 covid 跟踪器。在特定功能中,我需要映射数据。但我收到以下错误类型错误:无法解构“未定义”的属性“数据”,因为它未定义。我是新手,很难弄清楚这一点。我附上了错误截图和代码。
export const ShowDataOnMap = ({data, casesType = "cases"}) =>
data.map((country) => (
<Circle
center={[country.countryInfo.lat, country.countryInfo.long]}
fillOpacity={0.4}
pathOptions={casesTypeColors[casesType].option}
radius={
Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
}
>
<Popup>
<div className="info-container">
<div
className="info-flag"
style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
></div>
<div className="info-name">{country.country}</div>
<div className="info-confirmed">
Cases: {numeral(country.cases).format("0,0")}
</div>
<div className="info-recovered">
Recovered: {numeral(country.recovered).format("0,0")}
</div>
<div className="info-deaths">
Deaths: {numeral(country.deaths).format("0,0")}
</div>
</div>
</Popup>
</Circle>
));
无论你在哪里使用
ShowDataOnMap
,你都会在 props 中传递数据,在传递数据之前确保它不是空的/未定义的。