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

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

我实际上并没有运行它，因此它们可能是一些小错误，并且如果您的数据记录具有唯一的ID，则应将这些ID用于键属性而不是数组索引，但是您会发现jist。

更新

同样的事情，但是使用钩子更简单，更短：

const ParentThatFetches = () => {
  const [data, updateData] = useState();
  useEffect(() => {
    const getData = async () => {
      const resp = await fetch('some/url');
      const json = await resp.json()
      updateData(json);
    }
    getData();
  }, []);

  return data && <Child data={data} />
}