ReactJS base64でファイルのアップロード

Question

私は、サーバーの実行中にAJAXを経由して送信するbase64文字列を取得しようとしているリアクトコンポーネント

handleChangeImage: function (evt) { 
    console.log("Uploading"); 
    var self = this; 
    var reader = new FileReader(); 
    var file = evt.target.files[0]; 

    reader.onload = function(upload) { 
     self.setState({ 
      image: upload.target.result 
     }); 
    }; 
    reader.readAsDataURL(file); 
    console.log(this.state.image); 
    console.log("Uploaded"); 
}, 

と

<input ref="file" type="file" name="file" 
           className="upload-file" 
           id="file" 
           onChange={this.handleChangeImage} 
           encType="multipart/form-data" 
           required/> 

ここに呼ばれている上、この機能を持っていますフラスコ。 問題は、それは私がファイルにそれが今、文字列全体をログに記録する第二の時間を選択しようとした場合

おかしい事は、あるコンソールにヌルとして記録され、私はファイルを選択する毎回です。私は単純なものを見逃しているに違いありません。

Answer 1

状態が印刷時に変更されていないため、コンソールにはnullとして記録されます。 2回目にファイルを選択すると、コンソールにログインした文字列は、実際に選択した前のファイルに属します。状態は、選択した2番目のファイルに変更されていません。直ちにthis.state変異ない）

SETSTATE（しかし ペンディング状態遷移を作成する：

React's docを参照します。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。 setStateへの呼び出しの同期操作を保証する はなく、パフォーマンス向上のために を呼び出してもよいでしょう。あなたは正しい状態を印刷したい場合は、コールバック関数で、それを記録することがあります

：

self.setState({ 
    image: upload.target.result 
}, function() { 
    console.log(self.state.image); 
}); 

状態が1秒の遅延の後に変更する必要があり、これも動作します：

reader.onload = function(upload) { 
    self.setState({ 
     image: upload.target.result 
    }); 
}; 
reader.readAsDataURL(file);  
setTimeout(function() { 
    console.log(self.state.image); 
}, 1000);