相关疑难解决方法(0)

我想在完成ajax请求后渲染我的组件.

您可以在下面看到我的代码

var CategoriesSetup = React.createClass({

    render: function(){
        var rows = [];
        $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
            $.each(data, function(index, element){
                rows.push(<OptionRow obj={element} />);
            });
           return (<Input type='select'>{rows}</Input>)

        })

    }
});

但我得到下面的错误,因为我在我的ajax请求的done方法内返回渲染.

Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

有没有办法在开始渲染之前等待我的ajax请求结束？

我对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一起使用时，它不会返回任何内容。谁能帮我解决我的问题？

谢谢！！！