绑定弹出窗口返回未定义

Question

我正在关注 Coding with Adam 的 Covid-19 Map 教程。单击每个国家/地区时，弹出窗口会显示该国家/地区的名称以及感染计数。可以在此处获取 COVID 数据。

我复制的示例无法正确显示感染计数，返回未定义而不是数字。

const CovidMap = ({ countries }) => {

    const mapStyle = {
        fillColor:"white",
        weight: 1,
        color:"black",
        fillOpacity: 1,
    };
    
    const onEachCountry = (country, layer) => 
    {
        layer.options.fillColor = country.properties.color;
        const name = country.properties.ADMIN;
        const confirmedText = country.properties.confirmedText;

        layer.bindPopup(`${name} ${confirmedText}`); //confirmedText returns undefined
    };

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

我确信可以访问 confirmedText 的值，因为 console.log() 会打印该值。 ADMIN和ISO_A3可以通过弹出窗口显示，但不能确认或confirmedText。

更新：忘记包含用于构建国家/地区的 GeoJSON。 就是这里。

进一步更新：如果我向引发错误的代码添加任何行，删除这些行并重新呈现页面，弹出窗口可以返回值。然而，后续重新渲染会引入同样的问题。

Answer 1

从你的SS看来，

confirmedText

并不是你的对象的属性。通常，对象在终端中显示为

{ prop: 'a',... }

，其中 ... 代表更大的对象。我也很好奇为什么你必须使用

properties

关键字访问你的子属性。在普通物体中，它只是

country.confirmedText

。我（我）首先会理解为什么需要以这种方式访问事物，这可能会解释为什么它是

undefined

。

我想将此作为评论，但我还不能这样做。

Answer 2

我也有同样的问题。我不知道如何解决，你解决了吗？