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()は降順または昇順を選択する能力を持っていません。代わりに（sandbox）_.orderBy()を使用します。第3引数@KyleRichardson

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

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