Значение переменной состояния потеряно - реагирует

Question

Я хочу построить CRUD в React с Laravel и Firebase. Все отлично, когда я работаю с текстом, но у меня возникли проблемы при попытке загрузить изображение в Firebase Storage. Я могу сохранить его, но не могу получить его URL.

Я написал 2 "console.log". В первом есть URL, но во втором (когда я пытаюсь получить URL из переменной состояния) ничего не возвращается.

handleSubmit = event =>{ 
  event.preventDefault();

  const {imagen} = this.state;
  if(imagen!=null){
      const uploadTask = storage.ref(`imagenes/${imagen.name}`).put(imagen);
      uploadTask.on('state_changed', 
      (snapshot) => {
        const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        this.setState({progress});
      }, 
      (error) => {
        console.log(error);
      }, 
    () => {
        storage.ref('imagenes').child(imagen.name).getDownloadURL().then(url => {
            this.setState({url});
            console.log(this.state.url); //<<<<<<<<<<<<<SHOW URL (IT'S OK!)
        })
    });
  }

var direccion = null;
const form = event.target;
let data = new FormData(form);
data.append('url', this.state.url);
console.log(this.state.url); //<<<<<<<DOESN'T SHOW URL !! (HERE'S THE TROUBLE)

Если вы хотите проверить весь файл: https://github.com/AndresVasquezPUCE/project/blob/master/pelicula

Я не профессионал, поэтому, пожалуйста, не будь груб: D

Answer 1

this.setState является асинхронным

Если вы хотите получить обновленное значение состояния, добавьте обратный вызов и получите доступ к новому состоянию, например

this.setState({ url: 'some url'}, () => {
 conosle.log(this.state.url);
});

Answer 2

Данные загружаются из Firebase асинхронно.К тому времени, когда ваши console.log(this.state.url); //<<<<<<<DOESN'T SHOW URL !! (HERE'S THE TROUBLE) данные еще не были загружены из Firebase, а then еще не был вызван.

Любой код, которому нужны данные из Firebase, должен находиться внутриthen() обратный вызов (например, console.log(this.state.url); //<<<<<<<<<<<<<SHOW URL (IT'S OK!)) или вызов оттуда (например, this.setState({url})).