Question

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

但是当我在此处将map函数与async一起使用时，它不会返回任何内容。谁能帮我解决我哪里出问题了？

谢谢！

Answer 1

您应始终将获取数据等关注事项与显示数据等关注事项分开。这里有一个父组件，该组件通过AJAX提取数据，然后在输入数据时有条件地呈现纯功能子组件。

class ParentThatFetches extends React.Component {
  constructor () {
    this.state = {};
  }

  componentDidMount () {
    fetch('/some/async/data')
      .then(resp => resp.json())
      .then(data => this.setState({data}));
  }

  render () {
    {this.state.data && (
      <Child data={this.state.data} />
    )}
  }
}

const Child = ({data}) => (
  <tr>
    {data.map((x, i) => (<td key={i}>{x}</td>))}
  </tr>
);

我实际上没有运行它，所以它们可能是一些小错误，但是您掌握了技巧。

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

1 个答案: