渲染地图以显示窗口信息时出现问题。但是在运行它时,错误是“未捕获的不变变量:对象作为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>
);
}
}