Блог

Главная - Вопросы по программированию - Сопоставьте массив объектов и передайте реквизиты определенному компоненту

Сопоставьте массив объектов и передайте реквизиты определенному компоненту

#javascript #reactjs

Вопрос:

Вот мой массив:

 const locations = [
    {
      results: [
        {
          name: "Rome, Italy",
          price: 100,
          distance: 1299,
          match: 96,
          lat: 40,
          lng: 60,
        },
        {
          name: "Beijing, China",
          price: 200,
          distance: 3000,
          match: 93,
          lat: 100,
          lng: 100,
        },
        {
          name: "California, USA",
          price: 250,
          distance: 420,
          match: 75,
          lat: 200,
          lng: 200,
        },
      ],
    },
    {
      results: [
        {
          name: "Rome, Italy",
          price: 100,
          distance: 1299,
          match: 96,
          lat: 50,
          lng: 60,
        },
        {
          name: "Beijing, China",
          price: 200,
          distance: 3000,
          match: 93,
          lat: 100,
          lng: 100,
        },
        {
          name: "California, USA",
          price: 250,
          distance: 420,
          match: 75,
          lat: 200,
          lng: 200,
        },
      ],
    },
  ];

Теперь я хочу взять lat lng координаты и и передать их в качестве реквизита этого компонента:

  {locations.map((location, index) => {
              return <MapMarker locations={locations[index]} />;
            })}

А вот фактический код компонентов:

 <MapMarkerContainersContainer>
      {locations.map((location, index) => {
        return (
          <AnyReactComponent
            lat={location.result[index].lat}
            lng={location.result[index].lng}
            text="My Marker"
          />
        );
      })}
    </MapMarkerContainersContainer>

Есть идеи, что я делаю не так?

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

1. Что происходит/не происходит, что отличается от того, что вы ожидаете? Пожалуйста, добавьте эту информацию к вашему вопросу.

Ответ №1:

Вы используете индекс locations массива. Таким образом, вместо использования location.result[index] вы могли бы уменьшить все значения locations.result внутри locations массива и просмотреть результаты:

 <MapMarkerContainersContainer>
{
  locations
    .reduce((acc, cur) => [...acc, ...cur.results], [])
    .map((location) => {
      return (
        <AnyReactComponent
          lat={location.lat}
          lng={location.lng}
          text="My Marker"
        />
      );
    })
}
</MapMarkerContainersContainer>

Ответ №2:

У вас есть массив внутри массива, так что вы можете сначала выровнять их.

   const marks = []
  locations.forEach(v => {
    v.results.forEach(i => { mark.push(i) })
  })

И затем

       {marks.map(m => 
          <AnyReactComponent
            key={`${m.lat}${m.lng}`}
            lat={m.lat}
            lng={m.lng}
            text="My Marker"
          />
      })}

Вам нужен ключ, иначе вы получите ошибки.

Ответ №3:

Вам нужно выровнять массив перед вызовом map.

 <MapMarkerContainersContainer>
    {locations.reduce((prev, cur) => [...prev, ...cur.results], []).map((location, index) => {
        return (
            <AnyReactComponent
                lat={location.lat}
                lng={location.lng}
                text="My Marker"
            />
        );
    })}
</MapMarkerContainersContainer>
Метки: