排序数组 onClick 并在 React 中渲染数组答案

【问题标题】：Sort array onClick and render the array in React排序数组 onClick 并在 React 中渲染数组
【发布时间】：2016-12-11 11:03:56
【问题描述】：

我有一个数组，里面装满了我提取的对象，我正在尝试对 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>
  );
}

});

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您将 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" />

React onClick 事件只能是一个函数，以供将来参考。（另外，JS 有时将数组称为对象，这解释了您遇到的错误）

【讨论】：

好的，谢谢您修复了数组错误消息，但它仍然没有更新。搞砸之后，我意识到如果我只是添加 setState 它会更新，所以最后的点击看起来是这样的： onClick = {() => this.setState(this.state.data.sort(sortAscending("recent")))}