Axios設定イベントで状態を設定する

Question

どのようにしてAxiosイベントの結果を状態に追加できますか？

：axiosポストのコンフィグ onUploadProgressイベントに

1. axios POSTメソッド
2. セット状態でのファイルのアップロードは
3. をmetodこれが私のコードで、次のエラー

を受信

export default class StudioAlbumUpload extends Component{ 

    constructor(props){ 
     super(props); 

     this.state = { prog: 0 }; 
    } 

    onDrop(acceptedFiles, rejectedFiles){ 
     var files = acceptedFiles; 
     var data = new FormData(); 
     data.append('file', files[0]); 

     var config = { 
      onUploadProgress: function(progressEvent) { 
       var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total); 
       //How set state with percentCompleted? 
       this.setState({prog: percentCompleted}); 
      } 
     }; 

     axios.post(`${ROOT_URL}/api/studio/album/upload`, data, config) 
      .then((response) => console.log('hello')) 
      .catch(error => console.log(error)); 
    } 

    render() { 
     return (
      <div> 
       {this.state.prog} 
       <Dropzone onDrop={this.onDrop} maxSize={5120} accept={'image/*'}> 
        <div>Try dropping some files here, or click to select files to upload.</div> 
       </Dropzone> 
      </div> 
     ); 
    } 
} 

Answer 1

アロー機能

あなたonUploadProgress機能は、独自のthisコンテキストを持っています。しかし、コンポーネントthis.setStateを使用する必要があります。したがって、=>arrow機能を使用するほうが良いでしょう。コンテキストにはバインドされず、以前のthisコンテキストが使用されています。

var config = { 
    onUploadProgress:(progressEvent) => { 
     var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total); 
     this.setState({prog: percentCompleted}); //How set state with percentCompleted? 
    } 
}; 

あなたはthisのコンテキストをバインドする必要があり、ここでhttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this#The_bind_method

var config = { 
    onUploadProgress: function(progressEvent) { 
     var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total); 
     this.setState({prog: percentCompleted}); //How set state with percentCompleted? 
    }.bind(this) 
};