reactjs - react-google-maps 多个标记和信息窗口

Question

我需要为 map 中的每个标记创建一个信息窗口。我可以看到 map 上的标记，但是当我单击标记以获取 InfoWindow 时，出现此错误 TypeError: Cannot read property 'isOpen' of undefined，引用 this. onToggleOpen 中的 setState({isOpen: !this.state.isOpen})。

代表致谢

componentWillMount() {
    this.setState({ markers: [], isOpen: false })
  }

componentDidMount() {
    let list = { restaurants : []}
    database.ref('..').on('value', .. => {
            ...
            })
            this.setState({ markers:  list.restaurants});
        })

}

onToggleOpen(){
    this.setState({isOpen: !this.state.isOpen})
}


render() { 
    const MapWithAMarker = compose(
    withProps({
        googleMapURL: ...,
        loadingElement: ...,
        containerElement: ...,
        mapElement: ...
      }),
      withScriptjs,
      withGoogleMap
    )(props =>
      <GoogleMap
        defaultZoom={17}
        defaultCenter={{ lat: ..., lng: ... }}
      >
          {props.markers.map(marker => (
            <Marker
              key={marker.name}
              position={{ lat: marker.latitude, lng: marker.longitude }}
              onClick={this.onToggleOpen}
            >
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}> marker.key </InfoWindow>}
            </Marker>
          ))}


      </GoogleMap>
    );
    return (
        <section id="mapa">
            <div class= "container">
                <div class="row">
                    <div class="col-md-12 text-left">
                        <h2 class="section-heading">MAPA</h2>

                        <MapWithAMarker markers={this.state.markers}/>

                    </div>
                </div>
                <div class="row text-center">

                </div>
            </div>
        </section>
    ) 
}

编辑:更新代码:

export default class Mapa extends Component {
  constructor(props) {
    super(props)
    this.state = {
      markers: [],
      isOpen: false
    }
  }

componentDidMount() {
    let list = { restaurants : []}
    database.ref('..').on('value', restaurants => {
            restaurants.forEach( restaurant => {
                    list.restaurants.push({'name': restaurant.key,
                            'longitude': restaurant.val().lng,
                            'latitude': restaurant.val().lat}

                        )
            })
            this.setState({ markers:  list.restaurants });
        })

}

onToggleOpen = () => {
        this.setState({isOpen: !this.state.isOpen})
    }

render() { 

    const MapWithAMarker = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=...&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />
      }),
      withScriptjs,
      withGoogleMap
    )(props =>
      <GoogleMap
        defaultZoom={17}
        defaultCenter={{ lat: .., lng: ... }}
      >
          {props.markers.map(marker => (
            <Marker
              key={marker.name}
              position={{ lat: marker.latitude, lng: marker.longitude }}
              onClick={this.onToggleOpen}
            >
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}> marker.key </InfoWindow>}
            </Marker>
          ))}

      </GoogleMap>
    );
    return (
        <section id="mapa">
            <div class= "container">
            <h3 class="info-title"><span class="info-title-span">Tasty and Convenient.</span></h3>
                <div class="row">
                    <div class="col-md-12 text-left">


                        <MapWithAMarker markers={this.state.markers}/>

                    </div>
                </div>
                <div class="row text-center">

                </div>
            </div>
        </section>
    ) 
}

Answer 1

该错误表明 this.state == undefined 在您尝试检索 this.state.isOpen 的范围内。

这是因为您的 this.onToggleOpen() 函数的作用域未正确绑定(bind)到您的组件。

尝试重构它以使用箭头函数，如下所示:

onToggleOpen = () => {
    this.setState({isOpen: !this.state.isOpen})
}

---

旁注:

声明初始 this.state 的最佳实践是在组件的 constructor 中执行此操作。生命周期方法如下:

constructor(props) {
  super(props)
  this.state = {
    markers: [],
    isOpen: false
  }
}

此外，this.state.isOpen 应该是每个标记 的唯一属性，而不是所有标记的总括值吗？这样您就可以单独打开每个标记，而不是一次全部打开。

示例解决方案:

// Dependencies.
import React from 'react'
// GoogleMap, etc ..

// Map.
export default class Map extends React.Component {

  // State.
  state = {markers: []}

  // Render.
  render() {

    // Map With A Marker.
    const MapWithAMarker = compose(
      withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=...&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{height: `100%`}}/>,
        containerElement: <div style={{height: `400px`}}/>,
        mapElement: <div style={{height: `100%`}}/>
      }),
      withScriptjs,
      withGoogleMap
    )(props =>
      <GoogleMap defaultZoom={props.zoom} defaultCenter={{lat: props.lat, lng: props.lng}}>
        {props.markers.map(props => <RestaurantMarker key={props.name} {...props}/>)}
      </GoogleMap>
    )

    // Return Map.
    return (
      <section id="map">
        <div class= "container">
        <h3 class="info-title"><span class="info-title-span">Tasty and Convenient.</span></h3>
          <div class="row">
            <div class="col-md-12 text-left">
              <MapWithAMarker 
                markers={this.state.markers}
                lat={37.7749}
                lng={122.4194}
                zoom={17}
              />
            </div>
          </div>
          <div class="row text-center">
            Text
          </div>
        </div>
      </section>
    )

  }

  // Did Mount.
  componentDidMount() {

    // Download Restaurants.
    database.ref('..').on('value', restaurants => {

      // Restaurants Placeholder.
      let markers = []

      // Map Restaurants To List.
      restaurants.forEach(restaurant => {
        markers.push({
          'name': restaurant.key,
          'longitude': restaurant.val().lng,
          'latitude': restaurant.val().lat
        })
      })

      // Update State.
      this.setState({markers})

    })

  }

}


// RestaurantMarker.
class RestaurantMarker extends React.Component {

  // State.
  state = {open: false}

  // Render.
  render() {

    // Extract Props.
    const {name, latitude, longitude} = this.props

    // Return Restaurant Marker Component.
    return (
      <Marker key={name} position={{ lat: latitude, lng: longitude }}>
        {this.state.open && (
          <InfoWindow onClick={() => this.setState(state => ({open: !state.open}))}> {name} </InfoWindow>
        )}
      </Marker>
    )

  }

}