如何从对象数组中按poly.ID匹配对应Name值并渲染到Popup组件

问题原因 #

• 原有代码的map方法仅返回布尔类型的匹配结果，没有返回需要渲染的Name字段值
• 匹配逻辑错误：误将poly.ID与zone.Name做匹配，正确匹配逻辑应为poly.ID和zone.ID相等

最优实现方案 #

使用Array.find()方法匹配对应项，该方法会返回第一个符合匹配条件的数组项，更适配单条匹配的场景：

<Polygon positions={}>
  <Popup>
    {zones.find(zone => zone.ID === poly.ID)?.Name}
  </Popup>
</Polygon>

代码中的可选链?.用于处理无匹配项的场景，未找到对应数据时不会抛出报错，仅返回空值不渲染内容。

兼容方案（运行环境不支持可选链时使用） #

可以先预存匹配结果再做判断，避免重复遍历数组提升性能：

// 组件逻辑部分提前获取匹配项
const matchedZone = zones.find(zone => zone.ID === poly.ID);

// 渲染部分
<Polygon positions={}>
  <Popup>
    {matchedZone ? matchedZone.Name : ''}
  </Popup>
</Polygon>

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