Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/428.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 反应JS->;存储来自promise的变量_Javascript_Reactjs_Google Maps_Promise_Google Geocoder - Fatal编程技术网

Javascript 反应JS->;存储来自promise的变量

Javascript 反应JS->;存储来自promise的变量,javascript,reactjs,google-maps,promise,google-geocoder,Javascript,Reactjs,Google Maps,Promise,Google Geocoder,我试图找出如何将承诺-回报阶段存储到变量中。在这个用例中,我使用google地图和google的geocoder将地址的JSON文件转换为一个lat lng对象数组,以便制作标记,但不管怎样,我还是很好奇。它是通过一个承诺来完成的,但由于我被迫循环遍历数据并执行调用,我不能调用另一个函数并放弃承诺,因为我最终必须重复承诺。这意味着我需要将对象存储在一个单独的变量中。请参阅下面的代码部分 address.json { "address" : "Oosterpark 9", "city"

我试图找出如何将承诺-回报阶段存储到变量中。在这个用例中,我使用google地图和google的geocoder将地址的JSON文件转换为一个lat lng对象数组,以便制作标记,但不管怎样,我还是很好奇。它是通过一个承诺来完成的,但由于我被迫循环遍历数据并执行调用,我不能调用另一个函数并放弃承诺,因为我最终必须重复承诺。这意味着我需要将对象存储在一个单独的变量中。请参阅下面的代码部分

address.json

{ 
  "address" : "Oosterpark 9",
  "city" : "Amsterdam",
  "name" : "Onze Lieve Vrouwe Gasthuis"
  "zipcode" : "1091 AC"
},
{
  "address" : "Jan Tooropstraat 164",
  "city" : "Amsterdam",
  "name" : "Sint Lucas Andreas Hospital"
  "zipcode" : "1061 AE"
}
Map.js

makeMarker(a){
    Geocode.setApiKey(this.apiKey);
    let arr = [];
    for(let i=0; i < a.length; i++){
        let address = b[i].address.replace(" ","+") + ',+'+b[i].zipcode.replace(" ","+")+',+'+b[i].city;

        arr[i] = Geocode.fromAddress(address).then(
            response => {
                const {lat, lng} = response.results[0].geometry.location;
                console.log(lat, lng);
                return {lat: lat, lng: lng};
            }
        );
    }
return arr;
}
makeMarker(a){
Geocode.setApiKey(this.apiKey);
设arr=[];
for(设i=0;i{
const{lat,lng}=response.results[0].geometry.location;
控制台日志(lat、lng);
返回{lat:lat,lng:lng};
}
);
}
返回arr;
}
在这种情况下,在构造函数中调用上述函数,其中一个变量等待由makeMarker函数的结果定义。在本例中,它只返回[promise,promise],当它应该返回[{lat:uu u,lng:__,},{lat:_,lng:__,}]时

我希望听到你关于如何解决这个用例的一些想法

您可以使用,在
类的实例上创建一个承诺数组,然后在
componentDidMount
(或其他有用的生命周期挂钩)上运行:

比如说:

makeMarker(a){
    Geocode.setApiKey(this.apiKey);
    let arr = [];
    for(let i=0; i < a.length; i++){
        let address = b[i].address.replace(" ","+") + ',+'+b[i].zipcode.replace(" ","+")+',+'+b[i].city;

        arr[i] = Geocode.fromAddress(address)
    }
    this.promises = arr;
}

下面是一个小例子,说明了这种用法的
Promise.all

const data=[1,2,3,4,5,6];
类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
获取数据:[]
}
this.promises=data.map(d=>{
返回新承诺((解决)=>{
setTimeout(()=>resolve(d),1500);
})
});
}
componentDidMount(){
然后(fetchedData=>this.setState({fetchedData}));
}
render(){
const{fetchedData}=this.state;
返回(
{fetchedData.length?fetchedData.map(d=>{d}):“正在加载…”
);
}
}
const rootElement=document.getElementById(“根”);
render(,rootElement)


@Sagiv b.g使用Promise.all的答案是最好的方式。
这是另一种方法

var arr=[];
makeMarker(a){
Geocode.setApiKey(this.apiKey);
for(设i=0;i{
const{lat,lng}=response.results[0].geometry.location;
控制台日志(lat、lng);
addToArr({lat:lat,lng:lng},b);
}
);
}
}
addToArr(latLongObj,b){
arr.push(latLongObj);
如果(arr.length>=b.length){
//调用您的函数并执行逻辑
}

}
makeMarker
是在构造函数中调用的吗?后来我把它移到了render函数中,我只是在构造函数中调用它来运行函数,然后我让我的render函数返回任何东西。你可以使用Promise.all([Promise,Promise])。然后(回调),请参阅ref Promise.all似乎就做到了。它允许我更改状态并在之后加载标记。不幸的是,我认为我仍然必须在react状态中删除变量。我希望有一种方法可以把它分配给一个变量。这样我就可以避免状态更改并在一个状态中渲染,但是这个承诺可能需要一些时间来解决,对吗?此时渲染将至少被调用一次。为了显示结果,必须调用另一个渲染。还是我错过了你的目标?我说的更多的是其他案例研究。在本案例研究中,它工作完美无瑕,但是,如果我想手动加载标记,我是否能够调用promise.all?当我需要它时?promise只能解决一次。当使用
时,
是您推送回调的方式,回调将在问题解决后运行。你可以把代码放在任何你想放的地方。没问题。很高兴我能帮忙
makeMarker(a){
    Geocode.setApiKey(this.apiKey);
    let arr = [];
    for(let i=0; i < a.length; i++){
        let address = b[i].address.replace(" ","+") + ',+'+b[i].zipcode.replace(" ","+")+',+'+b[i].city;

        arr[i] = Geocode.fromAddress(address)
    }
    this.promises = arr;
}
Promise.all(this.promises).then(
  listOfResponses => {
     // rest of your code
  }
)