时间戳

首页 > 解决方案 > ReactJS -> 存储来自 promise 的变量

javascript - ReactJS -> 存储来自 promise 的变量

问题描述

我试图弄清楚如何将承诺返回阶段存储到变量中。在这个用例中，我使用谷歌地图和谷歌的地理编码器将地址的 JSON 文件转换为 lat lng 对象数组以制作标记，但无论如何我都很好奇。它是通过一个单一的承诺完成的，但由于我被迫循环数据并执行调用，我不能调用另一个函数并离开承诺，因为我最终必须重复承诺。这意味着我需要将对象存储在一个单独的变量中。请参阅下面的代码部分。

地址.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"
}

地图.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 函数的结果定义。在这种情况下，它只返回 [promise, promise]，而它应该返回 [{lat: __, lng: __,}, {lat: __, lng: __,}]。

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

标签： javascriptreactjsgoogle-mapspromisegoogle-geocoder

解决方案

您可以使用Promise.all，在 的实例上创建一组承诺class，然后在componentDidMount（或其他有用的生命周期挂钩）上运行： 

Promise.all(promies).then(...)

所以是这样的： 

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

这是这种用法的一个小例子Promise.all

const data = [1, 2, 3, 4, 5, 6];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchedData: []
    }
    this.promises = data.map(d => {
      return new Promise((resolve) => {
        setTimeout(() => resolve(d),1500);
      })
    });
  }

  componentDidMount() {
    Promise.all(this.promises).then(fetchedData => this.setState({ fetchedData }));
  }
  
  render() {
    const { fetchedData } = this.state;
    return (
      <div>
        {fetchedData.length ? fetchedData.map(d => <div>{d}</div>) : "Loading..."}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读