Javascript 尝试使用react传单choropleth映射choropleth时出错：无法读取属性'；地图'；未定义的

我正在尝试使用

react-传单choropleth

在

react

中制作choropleth

我的传单工作正常。
现在，当我尝试使用库加载（犯罪地区）时，我在映射功能时遇到错误，特别是：

无法读取未定义的属性“map”

似乎我没有准确地引用要映射的正确数组

我查看了git回购协议中的建议，并尝试了这些建议，但没有成功。我想知道我是否引用了我正在使用的

geoJson

中的错误值

下面是我的代码：

Leaf.js（在App.js中呈现）

import React，{Component}来自'React'；
从“反应传单”导入{Map，TileLayer}；
从“./leaf.module.css”导入类
从“react传单Choropleth”导入Choropleth
从“/assets/crimes\u by\u district.geojson”导入geojson；
常量样式={
填充颜色：“#F28F3B”，
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:'3'，
填充不透明度：0.5
};
类叶扩展组件{
render（）{
报税表（
feature.properties.value}
//可见={（功能）=>feature.id！==active.id}
比例={['#b3cde0'，'#011f4b']}
步骤={7}
mode='e'
style={style}
OneacheFeature={
（feature，layer）=>layer.bindPopup（feature.properties.label）
}
ref={（el）=>this.choropleth=el.element}
/>
);
}
}
导出默认叶；

创建您自己的

choropleth包装器

，使用与您包含的扩展类似的同一个choropleth库，因为

react-传单choropleth

似乎过时了：

function Choropleth() {
  const { map } = useLeaflet();

  useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/examples/basic/crimes_by_district.geojson"
    )
      .then((response) => response.json())
      .then((geojson) => {
        L.choropleth(geojson, {
          valueProperty: "incidents", // which property in the features to use
          scale: ["white", "red"], // chroma.js scale - include as many as you like
          steps: 5, // number of breaks or steps in range
          mode: "q", // q for quantile, e for equidistant, k for k-means
          style,
          onEachFeature: function (feature, layer) {
            layer.bindPopup(
              "District " +
                feature.properties.dist_num +
                "<br>" +
                feature.properties.incidents.toLocaleString() +
                " incidents"
            );
          }
        }).addTo(map);
      });
  }, []);

  return null;
}

函数Choropleth（）{
const{map}=useplopal（）；
useffect（（）=>{
取回(
"https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/examples/basic/crimes_by_district.geojson"
)
.then（（response）=>response.json（））
.然后（（geojson）=>{
L.choropleth（geojson{
valueProperty:“事件”//要使用功能中的哪个属性
比例：[“白色”、“红色”]，//chroma.js比例-包括任意数量
步骤：5，//范围内的中断或步骤数
模式：“q”//q表示分位数，e表示等距，k表示k-均值
风格
onEachFeature：功能（功能，图层）{
图层绑定弹出窗口(
“地区”+
feature.properties.dist_num+
“
”+
feature.properties.incents.toLocaleString（）+
“事件”
);
}
}).addTo（地图）；
});
}, []);
返回null；
}

然后将其作为映射子级导入：

<Map center={position} zoom={11} style={{ height: "100vh" }}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
   <Choropleth />
</Map>

通过将所需的各种变量作为道具传递，可以进一步扩展它