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' 
    ) 
    }); 
}