Также извлеките другие свойства элемента после выполнения array.map

#arrays #reactjs #properties #array.prototype.map

Вопрос:

Я сопоставляю массив данных, чтобы получить расстояние до точек, и в результате получаю (отфильтрованный по нулю, отсортированный массив, а затем извлеченный) точку с ближайшим расстоянием до меня. В результате я получаю «Расстояние: 234456».

Теперь я пытаюсь сделать то же самое с новым/тем же массивом данных с еще одним свойством, и вместе с результатом map.distance я бы тоже получил взамен дополнительное свойство.

В новом массиве данных будут такие объекты, как {id: "1", Point: "-34.910490, -56.201567", A: "4"} , предположим, что это будет ближайшая точка, я бы получил в ответ «Расстояние: 234456 и A: 4».

 Data : [{id: "1", Point: "27.1597268, 40.6646601"},
        {id: "2", Point: "11.1640393, 49.6487153"},
        {id: "3", Point: "26.1539253, 42.6599287"}, 
        {id: "4", Point: "21.1597268, 44.6646601"}],


const distances = this.state.Data.map(
      (item) =>
        !!(coords.longitude amp;amp; coords.latitude) amp;amp;
        getPreciseDistance(coords, item.Point)
    )
      .filter(Boolean)
      .sort()
      .map((distance) => <Text>{distance},</Text>);
 

Комментарии:

1. Я не уверен, что понимаю вашу проблему, вы имеете в виду, что расстояния в настоящее время выглядят так: [234456, 394502, 3029305] но теперь вы хотите, чтобы это было что-то вроде этого: [{distance: 39041, a: 4}, {distance: 312041, a: 6.6}, {distance: 930481, a: 59}] ?

2. @Carolin просто [{distance: 234456, a: 4}] лучше всего (ближайшая точка) Но если войдут все элементы массива, то я выберу тот, который мне нужен, это тоже хорошо.

Ответ №1:

Для того, чтобы ваша функция возвращала объект со свойствами distance , и a вы можете изменить свою функцию карты, чтобы она возвращала не только одно значение, но и возвращала нужный вам объект:

 const distances = this.state.Data.map(
      (item) =>
        !!(coords.longitude amp;amp; coords.latitude) amp;amp;
        // return an object instead of a single number
        ({ distance: getPreciseDistance(coords, item.Point), a: item.a})
    )
      .filter(Boolean)
      .sort()
 

Однако, если вы ищете один элемент с наибольшим расстоянием, я обычно использую функцию поиска в конце вашей функциональной цепочки. Таким образом, вы можете быть уверены, что ваша функция всегда возвращает только один элемент.

Комментарии:

1. когда я пытаюсь получить объект с двумя значениями, которые я получаю «объекты недопустимы в качестве дочернего элемента React… {расстояние, а}

2. Это потому, что теперь расстояние-это объект. это означает, что вы больше не можете этого делать: « .карта((расстояние) => ><Текст>{расстояние},<Текст></Текст>); « но вместо этого вам нужно получить доступ к свойствам с точечной нотацией: « .карта((элемент) =</Текст>> </Текст>><Текст>{item.distance}, {item.a}<Текст></Текст>); «

3. в данный момент ваш код ожидает, что a будет существовать в элементах исходного массива. Если это не так, вам понадобится ваша собственная логика для вычисления a.