Реагировать - невозможно установить setState внутри Promise, затем

Question

Я пытаюсь установить состояние внутри then() Обещания, но значение состояния не сохраняется и недоступно за пределами then ().

Ниже ОБНОВЛЕНО код:

handleSelect = location => {
  this.setState({ location });
  geocodeByAddress(
    location
  )
  .then(results => getLatLng(results[0]))
  .then(latLng => {
    this.setState({
      location_latitude: latLng.lat,
      location_longitude: latLng.lng,
    })
    console.log(this.state.location_latitude); // returns the correct value
  })
  console.log(this.state.location_latitude); // returns null (the originally declared value)
}

Если я console.log(this.state.location_latitude), я получаю значение null.Но если я консоль.log внутри блока then (), я получаю правильное значение.Как мне установить состояние в этом случае?

ОБНОВЛЕНО объяснение:

Чтобы дать лучший контекст всей логике здесь: я использую автозаполнение Google Адресовкомпонент, который позволяет пользователю выбрать местоположение из выпадающего списка.Вышеуказанный метод handleSelect вызывается, когда пользователь выбирает местоположение из раскрывающегося списка.Затем я извлекаю широту и долготу места, выбранного пользователем, используя метод geocodeByAddress, который является обещанием.Затем мне нужно получить широту и долготу и соответственно установить состояние, которое позже используется для отправки в базу данных.Я пока не могу отправить значение в базу данных, потому что есть другие входные данные формы, которые пользователь должен заполнить (которые также хранятся в состоянии), и как только он нажмет кнопку «Отправить», я отправлю все элементы состояния водиночный звонок на сервер.Итак, я ничего не хочу обновлять с помощью componentDidMount() или пока не обновляется, чтобы использовать componentDidUpdate().В любом случае, я могу сохранить только значение состояния внутри тогда geocodeByAddress (пожалуйста, исправьте меня, если я здесь не прав).Итак, я ДОЛЖЕН иметь возможность изменять значение состояния внутри блока then.

Answer 1

Дело в том, что когда вы set-state, вы не можете видеть результат состояния сразу после этого. Вот почему console.log возвращает null. Убедитесь, что ваш console.log находится в render block. Это связано с тем, что действия set-state имеют значение asynchronous и рассчитаны на повышение производительности. Это объясняется в документации setState. Взгляните на это => Почему setState в Async реагирует вместо синхронизации?

Answer 2

Это явно проблема, когда ваш вызов данных не реагирует.

Ваш код реакции выглядит нормально, но я предлагаю выплевывать код.

1) файл service.js - он выполняет ваш запрос и возвращает данные или возвращает ошибку.

2) компонент location, componentDidMount () или useEffect (() => {}, []) получает данные и обновляет состояние / useState ()

-

Чтобы дать вам фрагмент кода, мне необходимо предоставить консольный журнал latLang & results.

Большое спасибо 101

Answer 3

Вам необходимо привязать контекст функции к текущему классу / компоненту.Попробуйте что-то вроде ниже.Создайте функцию наподобие «callSetState», свяжите ее с этим и при вызове просто передайте ей значения в качестве параметров.

import React, { Component } from 'react';
class Test extends Component{
    constructor() {
        super()
        this.callSetState = this.callSetState.bind(this);
    }

    callSetState(latitude, longitude) { 
        this.setState({
            location_latitude: latitude,
            location_longitude: longitude,
        })
    }

/* Call this func in your class and call callSetState which is already bound to your component in constructor */

    // geocodeByAddress(location)
    //     .then(results => getLatLng(results[0]))
    //     .then(latLng => this.callSetState(latLng.lat, latLng.lng));

}