マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます。これは通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。

Question

コンポーネントがロードされたときにメソッドを呼び出そうとしていましたが、初期ページのロード時にデータをソートしました。

以下の例では、自分の状態を初期データに設定した後、即座にsort（）メソッドを呼び出してデータを並べ替えます。

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> 
    ); 
} 

}

これは動作しますが、私は、コンソールにメッセージが出ています：

警告：SETSTATE（...を）：専用でマウントや実装部品を更新することができます。これは、通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。これはノーオペレーションです。 Leaderboardコンポーネントのコードを確認してください。

この警告は無視しても過言ではありませんか？

Answer 1

コンポーネントがマウントされる前にthis.setStateを呼び出しているコンストラクタでthis.sort("daily")を呼び出していることが原因です。

this.sort("daily")をcomponentWillMountまたはcomponentDidMountに置き換えてください。

EDIT

@robertkelpは、あなたがこのような何かにあなたのソートやSETSTATEを変更する必要が指摘したように：あなたの配列のクローンを作成するslice(0)を行うと、適切に状態を設定することだということ

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

注意rowsプロパティ。