时间戳

首页 > 解决方案 > 循环和更新变量而不是覆盖它，React Native

reactjs - 循环和更新变量而不是覆盖它，React Native

问题描述

我是 React Native 的初学者。我的程序中有一个循环，它遍历来自 API 的一些结果，对于每个结果（邮政编码），它会在地图上放置一个带有相应坐标的图钉。

const showPostcode = async() => {

  {parkingPostcode && parkingPostcode.map((val, index) => {

    console.log(val.postcode);
    searchMultipleSpaces(val.postcode)
    console.log("=============")

    key={index}

  })}

}

上面的函数是遍历从 API 收集的结果的循环。

如您所见，它调用了另一个函数searchMultipleSpaces(val.postcode)。这是功能：

const searchMultipleSpaces = async(postcodee) => {
  const response = await camdenParking.get("", {

    params:{
      postcode: postcodee
    }

  })

  setparkingSpaces(response.data)   
}

如您所见，在第二个函数中，我们设置setparkingSpaces了 API 返回的任何内容。问题是对于每次不同的迭代，数据都将被覆盖。所以最终数据将只包含最后一次迭代的结果。我应该怎么做才能将所有迭代的每个结果都保存在那里而不会被覆盖？

这是我使用 parkSpaces 的地方：

                {parkingSpaces.map((val, index) => {
                return (<MapView.Marker
                        coordinate={{
                        latitude: parseFloat(val.latitude),
                        longitude:parseFloat(val.longitude)
                        }}
                        key={index}

标签： reactjsreact-nativeexpo

解决方案

建议您将您的searchMultipleSpaces函数转换为承诺并立即调用所有函数，如下所示

我改变的是，我没有返回整个响应，而是在其中做出新的承诺，然后解析响应的数据元素

const searchMultipleSpaces = async(postcodee) => {
  return new Promise((resolve,reject)=>{
     camdenParking.get("", {
       params:{
         postcode: postcodee
       }
      }).then(res=>resolve(res.data)).catch(err=>reject(err))
  }) 
}

然后 使用Promise.all()调用searchMultipleSpaces

像下面

const showPostcode = async() => {
   let allPromise = [];
  {parkingPostcode && parkingPostcode.map((val, index) => {

     console.log(val.postcode);
     allPromise.push(searchMultipleSpaces(val.postcode))
     console.log("=============")

     key={index}

   })}

   const data = await Promise.all(allPromise);

  //here you get all the response at once and then send it to setparkingSpaces

   setparkingSpaces(data)   

}

推荐阅读