知道为什么这段代码无法根据列正确排序吗?
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>
);
}
状态的切换似乎是正确的,但反射只是第一次发生。
最佳答案
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'
)
});
}
关于javascript - 使用reactjs进行多排序表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47836194/