使用reactjs的多重排序表

Question

有什么线索为什么此代码将无法基于列进行正确排序？

sort(key){
    this.setState({
      [`toggle-${key}`]: !this.state[`toggle-${key}`],
      data: sortBy(this.state.data, [key], this.state[`toggle-${key}`]).map(v => v)
    })
  } 
  render() {
    return (
      <div style={styles}>
        <table>
          <thead>
            {Object.keys(this.state.data[0]).map(v => {
              return(
                <th onClick={()=>this.sort(v)}>
                  {v.toUpperCase()}
                </th>
              )
              })}
          </thead>
          <tbody>
            {this.state.data.map(v=>{
              return(
                <tr>
                  <td>{v.id}</td>
                  <td>{v.name}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    );
  }

状态的切换似乎是正确的，但反射只是第一次发生。

https://codesandbox.io/s/zqno7m7j4p

Answer 1

Lodash的_.sortBy()无法选择降序或升序。 使用_.orderBy()代替（ sandbox ）：

sort(key) {
  const columnState = !this.state[`toggle-${key}`];

  this.setState({
    [`toggle-${key}`]: columnState,
    data: orderBy(
      this.state.data,
      [key],
      columnState ? 'desc' : 'asc'
    )
  });
}