地图标记不会加载到componentDidMount上

Question

我有一个从视口坐标获取用户位置的地图，然后它使用这些坐标从API中获取标记。问题是我的标记只会在我移动地图后显示。我对我所缺少的感到困惑：

componentDidMount(){
        this.getInitialPosition();
        this.fetchLocations();
        this.getMarkers();
    }

然后使用我的功能确定用户的位置：

getInitialPosition = () => {
        navigator.geolocation.getCurrentPosition(position => {
            let newViewport = {
                height: "100vh",
                width: "100vw",
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                zoom: 15
            }
            this.setState({
                viewport: newViewport
            });
        });
    }

然后我从我的API获取标记：

fetchLocations = () => {
        fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
        .then(resp => resp.json())
        .then(locations => this.setState({locations}))
    }

最后是标记：

getMarkers = () => {
        return this.state.locations.map(location => {
            return (
                <Marker key={location.id} offsetLeft={-25} offsetTop={-70} latitude={parseFloat(location.lat)} longitude={parseFloat(location.lng)}>
                    <div className="marker-styles" onClick={() => {this.handleLocationClick(location.id)}} >
                        <p>{location.reviews}</p>
                    </div>
                </Marker>
            );
        });
    }

然后在我打电话给地图时：

                <MapGL
                    {...this.state.viewport}

                    onClick={this.mapClick}
                    attributionControl={false}
                    onViewportChange={this.onViewportChange}
                    mapboxApiAccessToken={TOKEN}
                    mapStyle="mapbox://styles/mapbox/streets-v10">
                    {this.getMarkers()}                        
                </MapGL>

我得到了地图，但是我没有得到标记。有人可以指出我正确的方向吗？我认为问题在于我对诺言和组件生命周期的把握不佳，但是老实说我还无法弄清楚这一点。我在此处粘贴了完整（混乱）的代码：https://pastebin.com/j8dzYAsk

Answer 1

问题是getInitialPosition和fetchLocations是异步-并且当您调用getMarkers时尚未获取它们获取的数据

首先，我使getInitialPosition返回Promise，这样，一旦它也返回了fetchLocations返回的Promise，就很容易使用fetch

然后，这只是使用Promise.all等待这两个诺言解决的情况，一旦完成，您就叫this.getMarkers

componentDidMount(){
    Promise.all([
        this.getInitialPosition(),
        this.fetchLocations()
    ]).then(this.getMarkers);
}
getInitialPosition = () => {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(position => {
            let newViewport = {
                height: "100vh",
                width: "100vw",
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                zoom: 15
            }
            this.setState({
                viewport: newViewport
            });
            resolve();
        });
    });
}
fetchLocations = () => {
    return fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
    .then(resp => resp.json())
    .then(locations => this.setState({locations}));
}