在 React 中按 asc/desc 排序表答案

【问题标题】：Sort table asc/des in React在 React 中按 asc/desc 排序表
【发布时间】：2020-01-06 03:58:04
【问题描述】：

我正在使用这张桌子。到目前为止，当单击“日期”列时，它会按升序对表格进行排序。我希望能够再次单击它并让它返回到降序。关于如何做的任何想法？

我知道在 => 之后在 sortBy 中切换我的 a 和 b 会适得其反。

class Orders extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [
          {orders: 'Vanilla', date: '03/15/1990'}, 
          {orders: 'Chocolate', date: '03/15/1989'}, 
        ],
      };

      this.sortBy.bind(this);
    }

    renderTableData() {
        return this.state.data.map((data, index) => {
            const{orders, date} = data
            return (
                <tr key={index}>
                   <td>{orders}</td> 
                   <td>{date}</td>
                </tr>
            )
        })
    } 

    sortBy(sortedKey) {
        const data = this.state.data;
        data.sort((a,b) => a[sortedKey].localeCompare(b[sortedKey]))
        this.setState({data})
    }

    render() {
      let newData = this.state.data;

      return (
        <table id="orders">

          <tr className="header">
            <th>Order</th>
            <th onClick={() => this.sortBy('date')}>Date</th>
          </tr>
          <tbody>
            {this.renderTableData()}
          </tbody>
        </table>
      );

    }
  }

  export default Orders;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

首先你应该保持状态的排序顺序：

  this.state = {
    sortingOrder:'DESC',
    data: [
      {orders: 'Vanilla', date: '03/15/1990'}, 
      {orders: 'Chocolate', date: '03/15/1989'}, 
    ],
  };

每次排序后，你应该在你的排序函数中改变它

sortBy(sortedKey) {
    const data = this.state.data;
    let sortingOrder=this.state.sortingOrder;

    if(sortingOrder==='ASC'){
      sortingOrder='DESC';
      data.sort((a,b) => b[sortedKey].localeCompare(a[sortedKey]))
    }else{
      sortingOrder='ASC';
      data.sort((a,b) => a[sortedKey].localeCompare(b[sortedKey]))
    }
    this.setState({data,sortingOrder});
}

为了按升序进行初始排序，您应该在 componentDidMount 方法上调用 sort by，注意我已将 ASC 更改为 DESC 作为初始值

 componentDidMount(){
           this.sortBy('date');
 }

【讨论】：

谢谢！这很棒。您知道如何设置默认值，以便在页面加载时自动从 ASC 开始吗？

【解决方案2】：

只需添加另一个 state 变量，它是布尔值并基于该切换顺序。像这样sample

【讨论】：