为什么我在谷歌地图上看不到任何标记的反应？

Question

我一直在构建一个启用了googlemaps API的应用程序的前端。我想让用户点击地图添加标记，并将其存储到一个数组中；然而，在我实现了向谷歌地图标签的onClick添加标记函数之后。。。标记不会渲染。

我在react中实现添加标记函数时遇到了很多困难，看了几篇教程，但似乎找不到解决方案。如有任何帮助，我们将不胜感激！

const options = {
styles: mapStyles,
disableDefaultUI: true,
zoomControl: true,
}
var markersArray = [];
function addMarker(event){
let marker = new window.google.maps.Marker({
position: event.latLng,
time: new Date(),
draggable: true
});
markersArray.push(marker);
}

const Map = withScriptjs(withGoogleMap(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
options={options}
onClick={(event) => {
console.log(event);
console.log(markersArray);
addMarker(event);
}}
>
{markersArray.map((marker) =>(
<Marker
key={marker.time.toISOString()}
position={{lat: marker.lat, lng: marker.lng }}
/>
))}
<AutoComplete
style={{width: "100%", height:'40px'}}
types={['(regions)']}
onPlaceSelected={this.onPlaceSelected}
/>
</GoogleMap>
));

我相信问题出在这个问题上，但我不确定如何让它发挥作用。

{markersArray.map((marker) =>(
<Marker
key={marker.time.toISOString()}
position={{lat: marker.lat, lng: marker.lng }}
/>
))}

Answer 1

markersArray是一个普通数组。当您执行addMarker(event);时，您并没有更新组件的状态，它只是一个普通数组。所以React可能没有意识到这种变化。如果你使用钩子，你可以用你的标记创建一个状态，比如这个

const [markers, setMarkers] = useState([])

使用该markers数组来渲染<Marker />，然后在您的事件上添加标记

onClick={(event) => {
setMarker(previousMarkers => previousMarkers.concat([event]))
}

这将导致使用markers的新值重新渲染，您应该能够看到它们。

如果它不是一个功能组件，而且是类，那是一样的，但你可以在类的状态中定义标记

constructor(props) { 
super(props)
this.state = { markers: [] }
this.addMarker = this.addMarker.bind(this)
}
// function class below
addMarker(marker) {
this.setState(previousState => previousState.concat([marker])
}

在您的活动中，您可以拨打this.addMarker(marker)