为什么循环遍历坐标数据绘制Polygon多边形标注无法生效

问题原因 #

你编写的遍历代码没有正确返回JSX元素，核心是箭头函数的语法使用错误：

• 你在map的回调箭头函数里使用了花括号{}包裹函数体，但没有添加return语句返回Polygon组件，最终map方法生成的数组所有元素都是undefined，自然无法渲染出任何多边形。
• 另外你没有给遍历生成的列表元素添加唯一key属性，这也是React列表渲染的必要要求，缺少key可能会引发后续列表更新时的渲染异常。

解决方法 #

有两种修改方案可选：

方案1：使用箭头函数隐式返回 #

去掉函数体的花括号，改用圆括号包裹JSX（内容单行的话圆括号也可以省略），让箭头函数自动返回组件：

data.map((poly) => (
  <Polygon key={poly.Name /* 建议替换为更唯一的字段，比如每条数据专属的id */} positions={poly.Coordinates}>
    <Popup>{poly.Name}</Popup>
  </Polygon>
))

方案2：手动添加return语句 #

保留花括号包裹函数体的写法，在函数内显式return返回Polygon组件：

data.map((poly) => {
  return (
    <Polygon key={poly.Name /* 建议替换为更唯一的字段，比如每条数据专属的id */} positions={poly.Coordinates}>
      <Popup>{poly.Name}</Popup>
    </Polygon>
  )
})

单独渲染第一个元素时你是直接返回了JSX元素，没有经过带空返回的map处理，所以可以正常渲染。

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