Создание функции для сортировки таблицы React, JSX

Question

Я пытаюсь выяснить способ сортировки массива строк в зависимости от sortBy и состояния заказа.В настоящее время у меня есть функция 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

Прежде всего вы должны сохранить исходные данные и отфильтрованные данные в разных местах - например, исходные данные поступают с реквизита, а отфильтрованные данные находятся в состоянии.Потому что, если вы перезаписываете данные (как вы делаете в данный момент), вы не сможете, например, искать «fish» после поиска «курицы», потому что данные были отфильтрованы так, чтобы включать только «курицу» -записи - все «рыбные» записи удалены и больше не доступны.

Во-вторых, если вы хотите установить новое состояние в зависимости от старого состояния, вы всегда должны предоставлять функцию вместо объекта состояния дляsetState функция ( проверить эту ссылку ).

В-третьих, вместо использования блоков if-else в handleQuery, вы можете просто использовать 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});