javascript - 如何在 React 渲染函数中异步等待？

Question

我非常熟悉async wait，但也熟悉后端nodejs。但我遇到了一个场景，我必须在前端使用它。

我正在获取对象数组，并且在该对象中我获取了地点的lat lng。现在使用 react-geocode 我可以获取单个 lat lng 的地名，但我想在 map 函数内使用它来获取地名。所以我们知道它的 async 调用我必须在那里使用 async wait 。

这是代码

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

但是当我在这里将 async 与 map 函数一起使用时，它不会返回任何内容。谁能帮助我哪里出错了？

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，您应该使用它们作为键属性而不是数组索引，但您得到了要点。

更新

同样的事情，但使用钩子(Hook)更简单、更短:

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