Вызов асинхронных функций внутри обещания в React - PullRequest
Новая
       27

Вызов асинхронных функций внутри обещания в React

0 голосов
/ 07 июля 2019

Я разрабатываю приложение в React. У него есть простое окно поиска, при отправке я вызываю api1, который возвращает массив данных. Для каждого элемента в массиве мне нужно вызвать api2 - который должен быть асинхронным. В настоящее время код выглядит примерно так: 

onSubmit() { 
    api1(textboxvalue).then(data => { 
        let currentComponent = this      
        if(data matches condition1) {
        currentComponent.state.arrayOfElements1.push(data);
        }               

        if(data matches condition2) {
        currentComponent.state.arrayOfElements2.push(data);
        }               

        const arrayOfElements1 = this.state.arrayOfElements1
        arrayOfElements1.map(function (element) {
        api2(element) -> set this.state.data1loaded

        })

        const arrayOfElements2 = this.state.arrayOfElements2
        arrayOfElements2.map(function (element) {
        api2(element) -> set this.state.data2loaded

    })

}

Требуется проверить состояния data1loaded и data2loaded в режиме асинхронного рендеринга. Но с приведенным выше кодом, рендеринг вызывается только после выполнения обещания api1

Есть мысли?

Ответы [ 2 ]

1 голос
/ 07 июля 2019

@ amirKovacevic совершенно правильно. Вы никогда не должны изменять состояние напрямую: https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

Я не совсем понимаю ваш код, но я думаю, что вы хотите сделать что-то вроде этого: 

onSubmit() {
  api1(textboxvalue).then(data => {
    if(/* data matches condition1 */) {
      this.setState(prevState => ({
        arrayOfElements1: [...prevState.arrayOfElements1, data]
      }), () => {
        const requests1 = Promise.all(this.state.arrayOfElements1.map(function 
          (element) {
            return api2(element)
          })).then(data => this.setState({ data1loaded: true })) // I assume you want to have an indication loading was complete
      })
    }
  })
}

Обратите внимание на ад обратного вызова, в который я полез, потому что я не использовал async / await. Также обратите внимание, что я использовал обратный вызов setState: https://reactjs.org/docs/react-component.html#setstate

Установка состояния асинхронная, поэтому вы не должны использовать его сразу после использования setState, по крайней мере, если вы хотите получить новые значения.

Кроме того, мой пример только для первого массива элементов.

О, и я новичок в SO, так что извините, если что-то не соответствует обычным стандартам комментариев SO. :)

1 голос
/ 07 июля 2019

Вы переводите результат в состояние вместо использования метода setState , который будет повторно визуализировать компонент с новым состоянием. Это не имеет ничего общего с асинхронной природой Promises, а скорее с тем, как работает React (упрощено: обновление состояния и передачи состояния, а также добавление компонентов, что приводит к их визуализации).

Я предлагаю освежить в памяти Изучить основы , прежде чем двигаться вперед.

...