未捕获的不变违规:使用InfoWindow

时间:2019-05-27 10:23:26

标签: reactjs

渲染地图以显示窗口信息时出现问题。但是在运行它时,错误是“未捕获的不变变量:对象作为React子对象无效(找到:带有键{}的对象)。如果要渲染子代集合,请改用数组。” 在InfoWindow中(由MapContainer创建) 在div中(由Map创建)

我搜索并意识到我试图在React中渲染一个对象。但是当我检查console.log(this.state.selectedPlace.name的类型)时,它给了我字符串。我真的不知道问题出在哪里以及如何解决。

export class MapContainer extends Component {
    state = {
        showingInfoWindow: false,  
        activeMarker: {},          
        selectedPlace: {}     
      };

      onMarkerClick = (props, marker, e) => {
        this.setState({
            selectedPlace: props,
            activeMarker: marker,
            showingInfoWindow: true
          });
      }

    onClose = props => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    };  


  render() {
    return (
        <React.Fragment>
            <Map
                google={this.props.google} 
                zoom={14} 
                style={{width: '100%',height: 700}}
                initialCenter={{
                    lat: 16.081187,
                    lng: 108.211631
                }}>    
                <Marker 
                    onClick={this.onMarkerClick}                    
                    name={'Current location'} 
                />
                <InfoWindow
                    marker={this.state.activeMarker}
                    visible={this.state.showingInfoWindow}
                    onClose={this.onClose}
                >          
                    <div>
                        <h4>{this.state.selectedPlace.name}</h4>
                    </div>
                </InfoWindow>
            </Map>
        </React.Fragment>

    );
    }
}

0 个答案:

没有答案