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}));
}

地图标记不会加载到componentDidMount上

1 个答案: