用axios config事件設置狀態

Question

如何將Axios事件結果添加到狀態？

1. 與愛可信post方法上傳文件
2. 集邦成配置愛可信後onUploadProgress事件梅託德
3. 收到以下錯誤

這是我的代碼：

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

Arrow功能

你onUploadProgress功能都有自己的this背景。但是您需要使用組件this.setState方法。因此，您最好使用=>箭頭功能，該功能不具有上下文綁定並使用之前的this上下文。

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

瞭解這裏https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

更改功能方面

箭頭功能瞭解更多關於結合這裏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) 
};