创建一个函数以排序表React JSX

Question

im试图找出一种根据排序和顺序状态对我的行阵列进行分类的方法。我目前有一个handlesort函数，该功能正在抓取列名并将其设置为"分类状态"，并通过" ASC"或" DESC"切换订单，但现在我试图弄清楚如何根据Tartby来操作行和订单状态。我相信可能会创建一个漫长的条件渲染，但是想知道有人会缺少更简单的方式吗？感谢您的帮助，谢谢。

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 (
  <div className="App mt-3">
    <AlertDialogSlide
      open={this.state.error}
      handleClose={this.handleClose}
    />
    <Search handleQuery={this.handleQuery} />
    <Paper className="mt-3">
      <Header />
      <Table>
        <TableHead>
          <TableRow>
            {columnHeaders.map((header, i) => (
              <TableHeader
                header={header}
                key={`th-${i}`}
                handleSort={this.handleSort.bind(this, header)}
              />
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, i) => (
            <TableRow key={`thc-${i}`}>
              <TableItem row={row} />
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  </div>
   );
  }
  } 

Answer 1

首先，您应该在不同位置保存原始数据和过滤的数据 - 例如原始数据来自道具，被过滤的数据在状态中。因为如果您覆盖数据（目前像目前一样），那么您将无法进行例如搜索"鸡肉"后搜索"鱼"，因为将数据被过滤到仅包括"鸡" - 入口 - 所有"鱼"条目，删除并无法访问。

第二，如果要根据旧状态设置新状态，则应始终提供一个函数而不是状态对象到setState函数（请查看此链接）。

第三，而不是使用handleQuery中的IF-ELSE块，您可以直接使用keyword进行过滤。

现在是您的问题：您可以使用以下代码段订购和过滤行：

const { rows } = this.props; // assuming the original data comes from the props!
const { query, sortedBy, order } = this.state;
// filter the data (only if query is not "all"
const newRows = query === "all" ? rows : rows.filter(row => row[0].includes(query));
const sortedRows = sortedBy === "" ? newRows : newRows.sort((a, b) => {
  const valueA = a[sortedBy]; // get the row to sort by
  const valueB = b[sortedBy]; // get the row to sort by
  let sortedValue = 0;
  if (valueA < valueB) {
    sortedValue = -1;
  }
  else if (valueA > valueB) {
    sortedValue = 1;
  }
  if (order === "desc") {
    sortedValue *= -1; // if descending order, turn around the sort order
  }
  return sortedValue;
});
this.setState({rows: sortedRows});