Kann nur eine montierte oder montierte Komponente aktualisieren. Dies bedeutet normalerweise, dass Sie setState() für eine nicht eingebundene Komponente aufgerufen haben.

Question

Ich habe versucht, eine Methode beim Laden einer Komponente aufzurufen, um Daten beim ersten Laden der Seite zu sortieren.

Im folgenden Beispiel habe ich meinen Status auf die Anfangsdaten gesetzt und dann sofort die sort() -Methode aufgerufen, um die Daten zu sortieren.

export default class Leaderboard extends React.Component { 
constructor(){ 
    super(); 
    this.state = { 
     rows: 
      [{name: "Jonny", points: 124, total: 1234}, 
      {name: "Bob", points: 321, total: 4321}, 
      {name: "Sally", points: 234, total: 31234}, 
      {name: "Katie", points: 613, total: 12333}, 
      {name: "Cameron", points: 1232, total: 5231}] 
    }; 
    this.sort("daily"); 
} 

sort(args){ 
    if (args === "daily") { 
     var sorted = this.state.rows.sort(function(a, b){ 
      return a.points-b.points; 
     }); 
     this.setState(sorted.reverse()); 
    } 
    if (args === "total") { 
     var sorted = this.state.rows.sort(function(a, b){ 
      return a.total-b.total; 
     }); 
     this.setState(sorted.reverse()); 
    } 
} 
render() { 
    const Rows = this.state.rows.map((obj, i) => <Row key={i} num={i} name={obj.name} points={obj.points} total={obj.total}/>);  

    return (
     <div className="col-md-10 col-md-offset-1"> 
      <table className="table table-hover"> 
       <tbody> 
        <tr> 
         <th colSpan="4" className="text-center">Leaderboard</th> 
        </tr> 
        <tr> 
         <th> Number </th> 
         <th> Name </th> 
         <th onClick={() => this.sort("daily")}> Points </th> 
         <th onClick={() => this.sort("total")}> All time points </th> 
        </tr> 
        {Rows} 
       </tbody> 
      </table> 
     </div> 
    ); 
} 

}

Dies funktioniert, aber ich bin eine Nachricht in der Konsole bekommen:

Warnung: setState (...): Kann nur ein bereitgestelltes oder Montagekomponente aktualisieren. Dies bedeutet normalerweise, dass Sie setState() für eine nicht eingebundene Komponente aufgerufen haben. Dies ist ein No-Op. Überprüfen Sie den Code für die Leaderboard-Komponente.

Kann diese Warnung ignoriert werden?

Answer 1

Das passiert, weil Sie this.sort("daily") in Ihrem Konstruktor aufrufen, der this.setState aufruft, bevor die Komponente bereitgestellt wird.

Rufen Sie stattdessen this.sort("daily") in componentWillMount oder componentDidMount.

EDIT

Wie @robertkelp wies darauf hin, sollten Sie Ihre Sortierung und setState zu so etwas wie dies ändern:

var sorted = this.state.rows.slice(0).sort(function(a, b){ 
    return a.points-b.points; 
}); 
this.setState({rows: sorted.reverse()}); 

Beachten Sie, dass es slice(0) tut Ihr Array zu klonen und richtig Zustand in der Einstellung rows Eigentum.