Question

我有一个完整的对象数组，我提取，我正在尝试对React中的箭头点击数组。我有一个在javascript中运行良好的排序函数，但我是React的新手，无法弄清楚如何实现该函数并再次呈现列表。

我收到的各种错误信息取决于我尝试的内容。任何事情都无法将未定义排序为＆＃39;期望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设置为函数的结果，而不是函数本身。

替换

`<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有时将Arrays称为Object，它解释了你得到的错误）

对数组进行排序onClick并在React中呈现数组

1 个答案: