Warum wird meine Komponente unmounten?

Question

Ich bekomme die folgende Warnung in der Konsole.

Warnung: Kann nur eine montierte oder montierte Komponente aktualisieren. Dies bedeutet normalerweise, dass Sie setState, replaceState oder forceUpdate für eine nicht bereitgestellte Komponente aufgerufen haben. Dies ist ein No-Op.

Bitte überprüfen Sie den Code für die ProgressBar-Komponente.

Es scheint mir, ist dies wegen der componentWillUnmount, die (unten sehen Konsolenausgabe) nach dem ersten componentDidMount passiert. Die passiert, bevor Daten vom Server angekommen sind. Wenn die Daten schließlich ankommen, versucht setState mit etwas unmounted zu arbeiten.

Aber warum gibt es eine dort? Ich würde erwarten, dass das Unmount nur passiert, nachdem setState aufgerufen wurde (und Daten vom Server angekommen sind). So würde die Komponente immer noch für setState zur Verfügung stehen.

class ProgressBar extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { progress: 0 }; 
    } 

    loadProgressFromServer() { 
     let url = '/progress/' + this.props.topic_name; 
     console.log("LOADING progress FROM SERVER"); 
     $.ajax({ 
      url: url, 
      datatype: 'json', 
      cache: false, 
      success: function(data) { 
       console.log("finished loading from server"); 
       this.setState({ progress: data['progress'] }); 
      }.bind(this)   
     }) 
    } 

    componentDidMount() { 
     console.log("didmount"); 
     this.loadProgressFromServer(); 
    } 

    componentWillUnmount() { 
     console.log("willunmount"); 
    } 

    render() { 
     let progress = (this.state.progress * 100).toFixed(0); 
     return (
      <div className="progress" ref="pb"> 
       <div className="progress-bar" role="progressbar" aria-valuenow={ progress } aria-valuemin="0" aria-valuemax="100" style={{ width: progress +"%" }}> 
        { progress + "%" } 
       </div> 
      </div> 
     ) 
    } 
} 

Die Konsolenausgabe:

didmount 
LOADING progress FROM SERVER 
willunmount 
didmount 
LOADING progress FROM SERVER 
finished loading from server 
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. 

Please check the code for the ProgressBar component. 
finished loading from server 

EDIT: Es gibt keine höhere Auftragskomponente.

ReactDOM.render(
    <ProgressBar topic_name='name of topic' />, 
    document.getElementById('progressbar') 
); 

Answer 1

sehen, ob das hilft (die async: false beachten) - der Standardwert für async ist wahr, die Daten vom Server zurückkehrt, nachdem die Komponente wiedergegeben wird - Einstellung this.setState({ progress: data['progress'] }); bewirkt, dass das Warnmeldungen Sie bekommen

loadProgressFromServer() { 
     let url = '/progress/' + this.props.topic_name; 
     console.log("LOADING progress FROM SERVER"); 
     $.ajax({ 
      url: url, 
      async: false 
      datatype: 'json', 
      cache: false, 
      success: function(data) { 
       console.log("finished loading from server"); 
       this.setState({ progress: data['progress'] }); 
      }.bind(this)   
     }) 
    }