时间戳

首页 > 解决方案 > React/Javascript - 在运行函数之前等待变量填充

javascript - React/Javascript - 在运行函数之前等待变量填充

问题描述

我正在使用 Google 自动完成地理编码输入。我将其设置为处理输入更改（选择的位置）时的地理编码，但如果用户在输入位置后没有从自动完成结果中进行选择就点击提交按钮。一旦获得用户选择的位置，我将使用函数将 lat/lng 坐标传递给父组件的状态updateParentState()我想做的是等待lat和lng变量在运行该函数之前被填充。目前，该功能的自动完成部分，if (place.geometry)即条件的一部分，正在工作，因为lat/lng会在更改时立即填充，但由于对原始输入进行地理编码需要一些时间，因此该updateParentState()功能在lat/之前运行lng被填充。我该如何调整：

geocodeLoc = (place) => {
    var self = this;
    let lat = '';
    let lng = '';
    if (place.geometry) {
        // WORKS
        lat = place.geometry.location.lat();
        lng = place.geometry.location.lng();
    } else {
        let geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': place.name}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                // DOESN'T WORK
                lat = results[0].geometry.location.lat();
                lng = results[0].geometry.location.lng();
            }
        });
    }
    self.props.updateParentState(
        lat, lng
    );
}

标签： javascriptreactjs

解决方案

调用以及在块末尾的self.props.updateParentState回调：geocoder.geocodeif

geocodeLoc = (place) => {
    var self = this;
    if (place.geometry) {
        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();
        self.props.updateParentState(lat, lng);
    } else {
        let geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': place.name}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                const lat = results[0].geometry.location.lat();
                const lng = results[0].geometry.location.lng();
                self.props.updateParentState(lat, lng);
            }
        });
    }
}

推荐阅读