Setze Zustand mit axios config Ereignis

Question

Wie füge ich Axios Ereignisresultat dem Zustand hinzu?

1. Datei hochladen mit axios post-Methode
2. Set Zustand in Config onUploadProgress Falle axios Post metod
3. erhalten folgende Fehler

Dies ist mein Code:

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

Pfeil Funktion

Ihre onUploadProgress Funktion seinen eigenen thisKontext hat. Aber Sie müssen die Komponenten this.setState Methode verwenden. Sie verwenden also besser eine =>Pfeilfunktion, die keinen Kontext gebunden hat und den vorherigen this Kontext verwendet.

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

erfahren Sie mehr über Pfeil-Funktionen hier https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ändern Funktion Kontext

Erfahren Sie mehr über hier Bindung 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) 
};