相关疑难解决方法(0)

如何在react render函数中异步等待?

我对async await后端非常熟悉nodejs。但是我遇到了一种情况,我必须在前端使用它。

我正在获得对象的数组,并且在那些对象中我得到lat lng了位置。现在,react-geocode我可以获取单个地名,lat lng但是我想在map函数中使用该名称来获取地名。因此,正如我们所知道的那样,async我必须async await在那边使用。

这是代码

import Geocode from "react-geocode";
render = async() => {
  const {
    phase,
    getCompanyUserRidesData
  } = this.props   

  return (
    <div>
       <tbody>                   
        await Promise.all(_.get(this.props, 'getCompanyUserRidesData', []).map(async(userRides,index) => {
          const address = await Geocode.fromLatLng(22.685131,75.873468)
          console.log(address.results[0].formatted_address)                         
         return ( 
          <tr key={index}>
            <td>
            {address.results[0].formatted_address}
            </td>
            <td>Goa</td>
            <td>asdsad</td>
            <td>{_.get(userRides,'driverId.email', '')}</td>
            <td>{_.get(userRides,'driverId.mobile', '')}</td>
          </tr>
        )
        }))
      </tbody>
    </div>
  )
}
Run Code Online (Sandbox Code Playgroud)

但是,当我在此处将map函数与async一起使用时,它不会返回任何内容。谁能帮我解决我的问题?

谢谢!!!

javascript asynchronous promise async-await reactjs

0
推荐指数
1
解决办法
6161
查看次数

标签 统计

async-await ×1

asynchronous ×1

javascript ×1

promise ×1

reactjs ×1