如何在点击react-leaflet的GeoJSON组件时创建marker标记？

问题原因 #

你代码里有两个核心错误导致标记不渲染：

• 状态更新逻辑错误：React要求state是不可变的，你直接对原markers数组执行push操作，修改的是原有数组的引用，React的浅层比较检测不到数组变化，不会触发组件重渲染。
• MyMarkers组件缺少返回值：遍历生成Marker数组后没有return，最终组件返回undefined，自然不会渲染任何内容。

修复步骤 #

1. 修改MyData组件的点击事件逻辑 #

把原来的push+直接传原数组的写法，改成创建新数组更新状态：

// MyData.js的click事件修改如下
click: (e) => {
  // 不要修改原state数组，创建新数组传入setter
  setMarkers([...markers, e.latlng])
}

2. 给MyMarkers组件添加返回值 #

map遍历Marker数组后return结果：

function MyMarkers ({markers}) {
  if (markers.length > 0){
    // 这里加return，把map生成的组件数组返回
    return markers.map((position, id) => { 
      return <Marker key={id} position={position}/>
    })    
  } else {
    return null;
  }
};

额外优化建议 #

你现在用数组下标当key不是最佳实践，如果业务允许同一坐标可以重复添加标记，建议给每个标记生成唯一ID，比如用Date.now()配合坐标值生成，避免列表重排时的渲染异常。

内容的提问来源于stack exchange，提问作者just_Mango