配列onClickをソートして、配列をレンダリングします。

Question

私はフェッチしたオブジェクトの配列を持っていますし、Reactの矢印の配列onClickをソートしようとしています。私はjavascriptで完璧に動作するソート関数を持っていますが、私はReactを新しくしており、関数を実装してリストを再描画する方法を理解することはできません。

私が試したことに応じて、あらゆる種類のエラーメッセージが表示されます。 〜からのものは、未定義のソートを 'onclickがこの場合のようなオブジェクトではなく関数であると期待しています。

var LeaderBoard = React.createClass({ 

sortDescending: function(property) { 
    return function (a,b) { 
     return (a[property] > b[property]) ? -1 : (a[property] < b[property]) ? 1 : 0; 
    } 
}, 

getInitialState: function() { 
    return { 
     data: loading 
    }; 
}, 

componentWillMount: function() { 
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent', { 
     method: 'get' 
    }).then(response => response.json()).then(data => { 
     this.setState({ 
      data: data, 
     }); 
    }).catch(function(error) { 
     console.log("error is ", error); 
    }); 
}, 

render: function() { 
    var information = []; 
    for (var j=0; j<13; j++) { 
     information.push(
      <div className="row" key={this.state.data.username}> 
       <div className="col-md-1 col-xs-1"> 
        <h4>{j+1}</h4> 
       </div> 
       <div className="col-md-4 col-xs-4"> 
        <h4>{this.state.data[j].username}</h4> 
       </div> 
       <div className="col-md-4 col-xs-4"> 
        <h4>{this.state.data[j].recent}</h4> 
       </div> 
       <div className="col-md-3 col-xs-3"> 
        <h4>{this.state.data[j].alltime}</h4> 
       </div> 
      </div> 
    ); 
    } 
    return (
    <div> 
     <div id="Title" className="row"> 
      <h1>freeCodeCamp Leaderboard</h1> 
     </div> 
     <div className="row"> 
      <div className="col-md-1 col-xs-1"> 
       <h4>#</h4> 
      </div> 
      <div className="col-md-3 col-xs-3"> 
       <h4>Camper Name 
       </h4> 
      </div> 
      <div className="col-md-5 col-xs-5"> 
       <h4>Points in past 30 days 
        <img className="arrow" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" /> 
        <img className="arrow" onClick = {this.state.data.sort(this.sortDescending("recent"))} 
         src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" /> 
       </h4> 
      </div> 
      <div className="col-md-3 col-xs-3"> 
       <h4>All time points</h4> 
      </div> 
     </div> 
     <div>{information}</div> 
    </div> 
); 
} 

}); 

Answer 1

onClickは、関数そのものではなく、関数の結果をonClickに設定しています。

<img className="arrow" onClick = {() => this.state.data.sort(this.sortDescending("recent"))} src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" />

で

`<img className="arrow" onClick={this.state.data.sort(this.sortDescending("recent"))}    src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" />` 

を交換してはのonClickイベントは今後の参考のために、機能が、何もすることはできません反応します。 （また、JSは、時々オブジェクトとして、あなたが得ているエラーを説明する配列を参照します）