Question

我在react项目中使用了普通的Google Maps，并且在标记上用.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)将返回数组{ {1}}。

在您的情况下，您想遍历[2,3,4]的每个元素，但实际上不更改this.state.venues的任何值，我建议您使用.forEach()。

仅作说明，this.state.venues不会修改原始数组，它会返回一个新数组。

.map（）在React中的Google Map标记上

1 个答案: