创建一个函数来排序表React，JSX

Question

我试图找出一种方法来根据 sortBy 和 order 状态对我的 rows 数组进行排序。我目前有一个 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 (
  <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

首先，您应该将原始数据和过滤后的数据保存在不同的位置 - 例如原始数据来自props，过滤后的数据处于状态。因为如果你覆盖数据（就像你现在所做的那样），你将无法例如在搜索“鸡”之后再搜索“鱼”，因为数据被过滤为仅包含“鸡”条目 - 所有“鱼”条目都已删除且不再可访问。

其次，如果要根据旧状态设置新状态，则应始终向setState函数（check out this link）提供函数而不是状态对象。

第三，不要使用handleQuery中的if-else块，你可以直接使用keyword进行过滤。

现在回答你的问题： 您可以使用以下代码 sn-p 对行进行排序和过滤：

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