日期排序react_javascript-创建一个函数来对表React,JSX进行排序

我试图找出一种根据sortBy和order状态对行数组进行排序的方法.我目前有一个handleSort函数,该函数将捕获列名并将其设置为sortBy状态,并通过“ asc”或“ desc”来切换顺序,但是现在我试图弄清楚如何根据sortBy操作行和秩序状态.我相信可以创建长时间的条件渲染,但想知道有人会以更简单的方式来丢失我吗？感谢您的帮助.

state = {

columnHeaders: [

"Meat","Protein (g)","Calories (cal)","Carbohydrates (g)","Fat (g)"

],rows: [

["chicken breast","25","200","37","8"],["fried chicken","45","450","21","16"],["baked fish","15","250","30","9"]

],sortedBy: "",order: "desc",query: "all",error: false

};

handleClose = () => {

this.setState({ error: !this.state.error });

};

handleQuery = keyword => {

this.setState({

query: keyword

});

if (keyword === "chicken") {

this.setState({

rows: this.state.rows.filter(row => row[0].includes("chicken"))

});

} else if (keyword === "fish") {

this.setState({

rows: this.state.rows.filter(row => row[0].includes("fish"))

});

} else if (keyword === "beef") {

this.setState({

rows: this.state.rows.filter(row => row[0].includes("beef"))

});

} else {

this.setState({

error: true

});

}

};

handleSort = header => {

this.setState(state => ({

sortedBy: header,order: state.sortedBy === header ? invertDirection[state.order] :

"asc"

}));

};

render() {

const { columnHeaders,rows } = this.state;

return (

open={this.state.error}

handleClose={this.handleClose}

/>

{columnHeaders.map((header,i) => (

header={header}

key={`th-${i}`}

handleSort={this.handleSort.bind(this,header)}

/>

))}

{rows.map((row,i) => (

))}

);

}

}