Reactjs - Карты Google (без пакетов) и маркеры фильтрации

Question

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

Мне удалосьвозьмите некоторые данные о местоположении, используя foursquare для пяти кофейных мест в моей местности, которые я сохранил в массиве «sites» в своем состоянии приложения.Я использовал эти данные для создания маркеров в моем компоненте Map (который мне также удалось вставить в массив mapMarkers в состоянии моего компонента App), а также использовал его для создания списка мест в моем компоненте List.

Теперь мне нужно использовать поле ввода для фильтрации моего списка мест (в моем компоненте List) и маркеров на карте.Мне удалось заставить фильтр работать для моего Списка, но я боролся целую вечность с тем, как отфильтровать мои маркеры.Я сузил его до двух возможных способов:

1. Используйте shouldComponentUpdate () и создайте функцию, чтобы установить видимость маркеров карты всякий раз, когда мой фильтр FilterPlaces обновляется (как предлагалось в моем предыдущемопубликовать здесь: Как отфильтровать массив в моем состоянии, чтобы он отображал только маркеры карты на основе моего пользовательского ввода - React ).Я пытался сделать это таким образом, но я не могу заставить его работать правильно, и я не совсем уверен, в какой компонент добавить его (приложение или карта):

   shouldComponentUpdate(nextProps) {
   const { places } = this.props;
   if (nextProps.places !== places) {
     for (const place of places) {
       for (const marker of this.markers) {
         if (place.venue.id === marker.id) {
           marker.setVisible(true);
         } else {
           marker.setVisible(false)
         }
       }
     }
   }
   return false;
   

   }

Этот путь кажется довольно простым, но чем больше я продолжаю его читать, тем больше я думаю, что это может быть не лучшим способом, и я не совсем уверен, какСКС должен работать либо.

Другой способ был рекомендован наставником по программированию и кажется, что он может быть самым простым.Он / она сказал, чтобы установить видимость маркеров в моем компоненте List, где я использовал свой отфильтрованный список для визуализации элементов списка.Я целую вечность пытался найти выход из этого положения, но я не могу найти способ установить видимость моих маркеров до или после сопоставления через мой фильтр FilterPlaces для создания элементов списка.Самое близкое, что я получил, было добавить что-то вроде этого:

render () {

const { places, mapMarkers } = this.props;

const placeList = places
  .map(place => {
    return (  
      <li
        key={place.venue.id}
      >
        <p>{place.venue.name}</p>
        <p>{place.venue.location.address}</p>
      </li>
    )
  })
  .forEach(place => {
    if (mapMarkers.id.some(markerId => place.venue.id.indexOf(markerId) <= 0) {
       markerId.setVisible(true)
    } else {
      markerId.setVisible(false)
    }
  })

return(
  <div className="list">
    <ul>
      {placeList}
    </ul>
  </div>
)

}

Не думаю, что яЯ далеко, мне просто нужно больше рекомендаций.Вот мой полный проект: https://github.com/jameswos/my-neighbourhood-map-app