非同期機能が完了するまでの待ち時間

Question

フォームに画像をアップロードしていて、フォームがFirebaseデータベースに送信されており、画像URLをFirebaseデータベースに送信したいとします。

var {image} = this.state; 
 
var {url} = this.state; 
 
var that = this; 
 

 
var storageRef = firebase.storage().ref('students_images/' + image.name); 
 
storageRef.put(image).then(function(snapshot) { 
 
    that.setState({ 
 
    url: snapshot.downloadURL 
 
    }); 
 

 
}); 
 
var studRef = firebaseRef.child('students'); 
 
var newStudRef = studRef.push().update({ 
 
    name: val['name'].value, 
 
    email: val['email'].value, 
 
    age: val['age'].value, 
 
    date: val['jdate'].value, 
 
    course: val['course'].value, 
 
    imgUrl: url 
 
});

しかし、問題は、画像のURLは、非同期関数から来ているということであり、それはURLをバック与える少しかかりますが、フォームがすぐに提出なっているので、 imgUrlの値が設定されます未定義。

Answer 1

問題は、この声明that.setState({url: snapshot.downloadURL});がコールバックで実行され、フォームの送信がコールバックの外側にあるということです。

スナップショット応答後に正しくsetStateになりますが、非同期コードからの応答を待っている間にコールバックの外に配置されたフォーム提出コードが実行されます。実際には、フォーム提出はsetStateより前に行われます。

解決策は、async関数のコールバック内でフォーム送信コードを実行することです。 State Updates May Be Asynchronousも覚えておいてください。

だから私は、次のようにあなたがそれを行うお勧めします。

var { image, url } = this.state; 
var storageRef = firebase.storage().ref('students_images/' + image.name); 
var studRef = firebaseRef.child('students'); 

var that = this; 
storageRef.put(image).then(function(snapshot) { 

    var newStudRef = studRef.push().update({ 
     name: val['name'].value, 
     email: val['email'].value, 
     age: val['age'].value, 
     date: val['jdate'].value, 
     course: val['course'].value, 
     imgUrl: snapshot.downloadURL 
    }); 

    that.setState({ url: snapshot.downloadURL }); 

    // ... do more things with 'snapshot' or 'newStudRef' 
}); 

Answer 2

あなたのフォームをブロック内に送信してください。

var storageRef = firebase.storage().ref('students_images/' + image.name); 
      storageRef.put(image).then(function (snapshot) { 

       that.setState({url: snapshot.downloadURL}); 

       var studRef = firebaseRef.child('students'); 

      var newStudRef = studRef.push().update({ 
       name: val['name'].value, 
       email: val['email'].value, 
       age: val['age'].value, 
       date: val['jdate'].value, 
       course: val['course'].value, 
       imgUrl: snapshot.downloadURL 
      }); 
      });