为什么循环数据和绘制多边形不起作用

Question

我有一个对象数组，其中坐标作为列表存在于其中。

const data = [
  {
    "Name": "Water",
    "Coordinates": [
      [
        57.94182777439993,
        79.50404114815193
      ],
      [
        31.209277877460135,
        78.80122177677728
      ],
      [
        31.35950051982242,
        105.15694820332524
      ],
      [
        58.17432360099434,
        105.42050546759074
      ]
    ]
  },
  {
    "Name": "Water",
    "Coordinates": [
      [
        58.72972797827911,
        76.90570777266291
      ],
      [
        29.54717721331581,
        76.37859324413196
      ],
      [
        30.460511875130663,
        105.19418747049103
      ],
      [
        59.71902258556691,
        106.7755310560839
      ]
    ]
  }
]

我厌倦了循环并使用坐标创建多边形注释。

代码：

       data.map((poly) => {
          <Polygon positions={poly.Coordinates}>
            <Popup>{poly.Name}</Popup>
          </Polygon>;
        }

以上代码无效，但是，当我尝试仅绘制数组中的第一项时，它起作用了。

      <Polygon positions={data[0].Coordinates}>
        <Popup>{data[0].Name}</Popup>
      </Polygon>;

Answer 1

地图函数return没什么。
要 return 您应该添加 return 语句的实际组件：

   data.map((poly) => {
      return (
          <Polygon positions={poly.Coordinates}>
            <Popup>{poly.Name}</Popup>
          </Polygon>;
      )
    }

或者直接用圆括号代替花括号 return 单个语句：

   data.map((poly) => (
      <Polygon positions={poly.Coordinates}>
        <Popup>{poly.Name}</Popup>
      </Polygon>
    )

为什么循环数据和绘制多边形不起作用

why looping through data and plotting polygon doesn't work

leaflet

reactjs

react-leaflet