Javascript 如何通过api获取数据并用它呈现子组件-react GoogleMaps

我必须修改文件：eventsMapPage.jsmain和Maps.jschild

getEvents = async () => {
const requestResponse = await request(BASE_API_URL + "/api/events", { method: "GET", headers: {}, body: {} });
this.state.eventList = requestResponse.data;
console.log('getEvents');
console.log(this.state.eventList);
}

//fetching data from api in parent
```getEvents = async () => {
const requestResponse = 
await request(BASE_API_URL + "/api/events", {method:"GET", headers: {}, body: {} });
     this.state.eventList = requestResponse.data;
}
```
//Sent state with fetched data
```
<GoogleApiWrapper eventList={this.state.eventList} ></GoogleApiWrapper>
```

//Send data
```
let markerList = []

export class MapContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        markerList = props.eventList;
```
//I want to put this fetched data to  Markers
```
return (
            <Map google={google} zoom={14} onClick={this.onMapClick} style={mapStyles} initialCenter={initialCenter}>
                {
                    markerList.map(marker => {
                        return (
                            <Marker
                                key={marker.id}
                                onClick={this.onMarkerClick}
                                title={marker.title}
                                name={marker.name}
                                position={{
                                    lat: marker.lat,
                                    lng: marker.lng
                                }}
                            />
...
```

实际上，我只想在我的谷歌地图中有来自web api的标记。当我用数据发送硬编码的arrar{}时，它工作，但当我用这个api发送时。首先呈现子对象，然后从api中获取。所以我的地图上没有任何标记

我读到：

组件将安装

像onChange或onBoundsChanged这样的google地图上的bevent，但我不知道如何在我的项目中使用它

通常在WPF中我有绑定，谷歌地图在这里工作很奇怪。JS应该在数据到来时自动刷新。如何从api中获取标记？

main.js

}

GoogleMapsWrapper.js

---

跟随

你正在直接改变状态，比如

您永远不会像这样改变状态，因为这不是改变状态的正确方法，也不会重新呈现组件

必须使用setState更改状态，这将导致重新渲染，组件将获取数据

this.setState({eventList : requestResponse.data})

还要确保在数据准备就绪时添加子组件

{this.state.eventList.length > 0 && <GoogleApiWrapper eventList={this.state.eventList} ></GoogleApiWrapper>}

您必须使用setState。永远不要这样做。state.someProperty=someValue

this.state.eventList = requestResponse.data; //direct mutation

this.setState({eventList : requestResponse.data})

{this.state.eventList.length > 0 && <GoogleApiWrapper eventList={this.state.eventList} ></GoogleApiWrapper>}