.map () над маркерами Google Map в React

Question

Я использую ванильные Карты Google в реактивном проекте, и я бью стену с .map над маркерами.Когда я размещаю один такой, он работает нормально, но оборачивание создания маркера в функцию .map приводит к ошибке Expected to return a value in arrow function array-callback-return.

Я знаю, что мне нужно что-то возвращать, но поскольку это создает маркеры, а не возвращает, есть ли способ обойти это?Или другой способ добиться этого?Заранее спасибо!

class App extends Component {

      state = {
        /* various states*/
        venues: []
      };

      componentDidMount(){
        this.getVenues();
        // this.renderMap();
      }

      renderMap = () => {
        /*loading gmaps script*/
        window.initMap = this.initMap

      }

      getVenues = () => {
        axios.get(`/*GET URL*/`)
              .then(response => {
                this.setState({
                  venues: response.data.results
                })
                console.log(this.state.venues);
              })
              .then(this.renderMap())
              .catch(err => {
                console.log(err);
              })

    }

      // Initialize and add the map
      initMap = () => {

        var map = new window.google.maps.Map(document.getElementById('map'), {
          zoom: 12});
        })

        // Create An InfoWindow
        var infowindow = new window.google.maps.InfoWindow()

Проблемы здесь

       this.state.venues.map(myVenue => {

          let contentString = myVenue.name;
          console.log(contentString);

          //Create a marker
          let marker = new window.google.maps.Marker({
            position: {lat: myVenue.geometry.location.lat , lng: myVenue.geometry.location.lng},
            map: map,
            title: myVenue.name,
            key: myVenue.id
          })
          console.log(myVenue.geometry.location);
          // Click on A Marker!
          marker.addListener('click', function() {
            // Change the content
            infowindow.setContent(contentString)
            // Open An InfoWindow
            infowindow.open(map, marker)
          })

        })

      }

      render() {
        return (
          <main className="App">
           ...
          </main>
        );
      }
    }

      function loadScript(url) { ... }

    export default App;

Answer 1

.map() используется для отображения (или изменения) каждого значения массива на новое значение, обычно с использованием исходного значения каким-либо образом, например, это: [1,2,3].map(val => val + 1) вернетмассив [2,3,4].

В вашем случае, когда вы хотите зациклить каждый элемент this.state.venues, но не изменять какое-либо значение this.state.venues, я бы посоветовал использовать .forEach().

Как примечание стороны, .map() не изменяет исходный массив, он возвращает новый.