如何动态渲染/加载具有两个值的数组？

如何解决如何动态渲染/加载具有两个值的数组？

我是Java Script和ReactJS的初学者，并且正在做一个项目来提高我的知识。

我将使用google-maps-react库在地图上渲染一些多边形点。

我遇到关于多边形的问题，为了能够在地图上进行绘制，我必须以这种方式发送数据：

const coords = {
  coords: [
    [
      { lat: 25.774,lng: -80.19 },{ lat: 18.466,lng: -66.118 },{ lat: 32.321,lng: -64.757 },{ lat: 25.774,],[
      { lat: 25.774,lng: -60.19 },lng: -46.118 },lng: -44.757 },};

问题是我拥有的坐标格式不同。它们的格式如下：

[
  [
    [-47.7027099655629,-22.26485424139211],[-47.70271526762656,-22.26487408404245],[-47.70272860122938,-22.26486817968162],[-47.70275769033151,-22.26485486960603],[-47.7027803963492,-22.26483968832534],[-47.7027099655629,-22.26485424139211]
  ]
],[
  [
    [-47.70336262481528,-22.26561084941619],[-47.70336542334331,-22.26561213882109],[-47.70336596593334,-22.26561211173161],[-47.7033695288571,-22.2656092720629],[-47.70337969579747,-22.26560034650085],[-47.70336262481528,-22.26561084941619]
  ]
]

如您所见，它们是不同类型的对象，它们知道如何告诉我是否有任何javascript函数，可以使用与库google-maps-react模型相同的方式保留坐标数组？

我希望我的数组看起来像这样：

const coords = {
  coords: [
    [
      { lat: -47.7027099655629,lng: -22.26485424139211 },{ lat: -47.70271526762656,lng: -22.26487408404245 },{ lat: -47.70275769033151,lng: -22.26485486960603 },{ lat: -47.7027803963492,lng: -22.26483968832534 },{ lat: -47.7027099655629,[
      { lat: -47.70336262481528,lng: -22.26561084941619 },{ lat: -47.70336542334331,lng: -22.26561213882109 },{ lat: -47.70336596593334,lng: -22.26561211173161 },{ lat: -47.70337969579747,lng: -22.26560034650085 },{ lat: -47.70336262481528,};

我无法一一更改此数据，具有我坐标的原始文件几乎有八千行，因此我需要一个自动执行此功能的函数。

这是我尝试使用的原始数据：https://gist.githubusercontent.com/bernalvinicius/6213d045e6f1c360008489bb416e58b5/raw/b8b997bb7e8d640a41a76ae0214663499fe1d8e5/coordinates.json

谢谢！

解决方法

您将不得不使用循环功能来映射该数据。由于在这里您需要循环多个数组，因此建议使用reduce函数。

如果您不知道什么是reduce函数，则应首先查看以下内容：https://www.w3schools.com/jsref/jsref_reduce.asp

基本上，您遍历每个元素，然后更改值。这是一个小例子，您可能需要根据需要进行调整：

const newCoordinates = coordinates.reduce((acc,curr) => {
  const newCoordiantes = curr[0].map((coord) => ({
    lat: coord[0],lng: coord[1]
  }));
  acc.push([newCoordiantes]);
  return acc;
},[]);

这是一个有效的示例：https://codesandbox.io/s/sharp-cloud-nfx4k?file=/src/index.js

,

假设它是一个数组数组，则可以将函数<ul> <li><a href="javascript:void(0)" class="active">Wordpress</a></li> <li><a href="javascript:void(0)">Web Apps</a></li> <li><a href="javascript:void(0)">Ecommerce</a></li> <li><a href="javascript:void(0)">More</a></li> </ul>与函数buttons[current]一起使用，以构建所需的输出。

reduce

map

,

您可以使用map方法。您似乎彼此之间有3层数组，最后您想将包含[lat,lng]的数组更改为{ lat,lng }，但是似乎您只有一层包含一层您想要展平的子元素。因此，您可以按以下方式级联两个map调用（其中一个隐式解构单元素数组）：

const convert = arr => arr.map(([group]) => group.map(([lat,lng]) => ({ lat,lng })))

const inputData = [[[[-47.7027099655629,-22.26485424139211],[-47.70271526762656,-22.26487408404245],[-47.70272860122938,-22.26486817968162],[-47.70275769033151,-22.26485486960603],[-47.7027803963492,-22.26483968832534],[-47.7027099655629,-22.26485424139211]]],[[[-47.70336262481528,-22.26561084941619],[-47.70336542334331,-22.26561213882109],[-47.70336596593334,-22.26561211173161],[-47.7033695288571,-22.2656092720629],[-47.70337969579747,-22.26560034650085],[-47.70336262481528,-22.26561084941619]]]]

const outputData = convert(inputData)
console.log(outputData)

.as-console-wrapper { max-height: 100% !important; top: 0; }

请注意，您显示的输入数据的格式为[...],[...]，它本身并不是完整的数据结构（它是由逗号运算符连接的两个数组，没有多大意义）。我猜应该在（[[...],[...]]）周围有一个外部数组，我在示例中添加了它（否则它将不起作用）。