React Native中map嵌套for循环无法正常遍历渲染的解决方法

云原生阿岚

2026-8-26

问题根因

for循环没有正常递增的核心原因是你在循环第一次执行（i=0）时就触发了return，直接终止了当前map回调的执行，for循环根本没有机会走到i自增的逻辑，所以永远只会返回i=0对应的那一段折线。
同时原写法存在边界漏洞：如果某个entry的geodata长度小于2，for循环不会执行，map回调会返回undefined，触发React渲染警告。

修正代码

调整逻辑：外层map遍历每个轨迹条目时，不要在内部for循环中提前返回，先遍历所有相邻坐标段，把所有要渲染的Polyline元素收集到数组中，所有段遍历完成后再统一返回元素数组即可，React原生支持渲染嵌套的合法元素数组，只要每个元素配置了唯一key就不会报错。

{trackingData.length > 0 ? (
  trackingData.map((entry) => {
    const latLongArr = entry.geodata;
    const polylineElements = [];
    // 坐标点不足2个无法构成折线，直接返回空节点
    if (latLongArr.length < 2) return null;

    for (let i = 0; i < latLongArr.length - 1; i++) {
      const segmentCoordinates = [
        {
          latitude: parseFloat(latLongArr[i].latitude),
          longitude: parseFloat(latLongArr[i].longitude),
        },
        {
          latitude: parseFloat(latLongArr[i + 1].latitude),
          longitude: parseFloat(latLongArr[i + 1].longitude),
        }
      ];

      polylineElements.push(
        <MapView.Polyline
          key={`poly-${entry.segment}-${i}`}
          coordinates={segmentCoordinates}
          strokeColor={entry.color}
          strokeWidth={3}
        />
      );
    }
    // 所有折线段生成完成后统一返回
    return polylineElements;
  })
) : (
  <View />
)}

注意事项