Как выполнить асинхронное ожидание в реагирующей функции рендера? - PullRequest
Новая
       10

Как выполнить асинхронное ожидание в реагирующей функции рендера?

0 голосов
/ 17 декабря 2018

Я довольно хорошо знаком с async await, но с серверной частью nodejs.Но мне попался сценарий, где я должен использовать его на переднем крае.

Я получаю массив объектов, и в этих объектах я получаю lat lng мест.Теперь, используя react-geocode, я могу получить название места для одного lat lng, но я хочу использовать его внутри функции карты для получения названий мест.Так что, как мы знаем, 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>
  )
}

Но когда я использую асинхронный с функцией карты здесь, это неничего не вернуть.Может кто-нибудь, пожалуйста, помогите мне, где я иду не так?

Спасибо !!!

1 Ответ

0 голосов
/ 17 декабря 2018

Вы всегда должны отделять задачи, такие как выборка данных, от задач, таких как их отображение.Здесь есть родительский компонент, который извлекает данные через 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>
);

Я на самом деле не запускал его, так что это могут быть небольшие ошибки,но вы получаете Jist.

...