Как отфильтровать и отсортировать данные таблицы с помощью React?

Question

У меня возникла проблема, когда при загрузке страницы я могу либо отсортировать таблицу по столбцу «имя» (по возрастанию или по убыванию) - - ИЛИ - - использовать панель поиска для фильтрации имен сотрудников. Моя проблема в том, что после сортировки по алфавиту поиск / фильтр больше не работает.

Я очень плохо знаком с React (я уверен, что это очень очевидно по моему коду), поэтому, пожалуйста, дайте мне знать, если что-то очевидно, я делаю неправильно. Заранее спасибо!

import React, { Component } from "react";
import API from "../utils/API"
import EmployeeRow from "./EmployeeRow"

class TableMain extends Component {
    state = {
        result: [],
        search: "",
        sortOrder: "descending"
    }

    componentDidMount() {
        API.search()
            .then(results => {
                console.log(results)
                this.setState({
                    result: results.data.results.map((res, i) => ({
                        image: res.picture.large,
                        firstName: res.name.first,
                        lastName: res.name.last,
                        phone: res.phone,
                        email: res.email,
                        dob: res.dob.date,
                        key: i
                    })
                    )
                })
            })
    };

    filterResults = (results) => {
        const value = this.state.search
        const finalResult = results.filter((employee) => {
            const lastName = employee.lastName.toLowerCase();
            const firstName = employee.firstName.toLowerCase()
            const fullName = firstName + " " + lastName

            if (fullName.includes(value)) {
                return employee
            }
        });

        return finalResult
    };

    sortResults = (event) => {
        const results = this.state.result
        // const id = event.target.id
        // if (id === 'name'){
        // } else if (id === 'phone'){
        // } else if (id === 'email'){
        // }
        if (this.state.sortOrder === "descending") {
            results.sort((a, b) => {
                if (a.firstName > b.firstName) {
                    return -1
                }
                return a.firstName > b.firstName ? 1 : 0
            }, 
            this.setState({ sortOrder: "ascending" }))
        } else if (this.state.sortOrder === "ascending") {
            results.sort((a, b) => {
                if (a.firstName < b.firstName) {
                    return -1
                }
                return a.firstName > b.firstName ? 1 : 0
            }, 
            this.setState({ sortOrder: "descending" }))
        }

        console.log("RESULTS: ", results)

        this.setState({
            sortedResults: results,
            isSorted: true
        })
    }

    onChange = e => {
        const value = e.target.value;
        if (!value) {
            this.setState({ isSearchEmpty: true });
        } else {
            this.setState({ search: e.target.value, isSearchEmpty: false });
        }
    }

    render() {
        // console.log("State", this.state)
        let employeeResults = this.state.result 

        if (this.state.isSearchEmpty) {
            employeeResults = this.state.result
        } else {
            employeeResults = this.filterResults(this.state.result)
        }

        if (this.state.isSorted) {
            employeeResults = this.state.sortedResults
        }

        return (
            <div>
                <input label="Search" onChange={this.onChange} />
                <div className="row">
                    <table style={{ width: "100%" }}>
                        <tbody>
                            <tr>
                                <th>Image</th>
                                <th style={{ cursor: "pointer" }} onClick={this.sortResults} id="name">Name</th>
                                <th id="phone">Phone</th>
                                <th id="email">Email</th>
                                <th id="dob">DOB</th>
                            </tr>
                            {[...employeeResults].map((item) =>
                                <EmployeeRow
                                    image={item.image}
                                    firstName={item.firstName}
                                    lastName={item.lastName}
                                    email={item.email}
                                    phone={item.phone}
                                    dob={item.dob}
                                    key={item.key}
                                />
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        )}
}


export default TableMain;

Answer 1

Проблема:

    if (this.state.isSorted) {
      employeeResults = this.state.sortedResults;
    }

Когда вы сортируете, вы устанавливаете для state.isSorted значение true, однако вы никогда не устанавливаете его обратно в false после завершения. Когда вы затем пытаетесь фильтровать, вы делаете фильтр:

    if (this.state.isSearchEmpty) {
      employeeResults = this.state.result;
    } else {
      employeeResults = this.filterResults(this.state.result);
    }

    if (this.state.isSorted) { // this is never reset after sorting.
      employeeResults = this.state.sortedResults;
    }

Но так как this.state.isSorted все еще имеет значение true, вы снова используете значения в this.state.sortedResults.

---

пожалуйста, дайте мне знать, если что-то очевидно, я делаю не так

Вы делаете это для себя непросто, поскольку вы фильтруете / сортируете один и тот же набор данных. Вот почему вам нужно выполнить действие при рендеринге, поскольку вы пытаетесь сохранить исходный список для последующего использования.

Если вы разделите список на две коллекции: исходный неизмененный и список отображения, вы всегда можете обратитесь к исходному списку для выполнения фильтрации / сортировки.

  componentDidMount() {
    API.search().then(results => {
      const tableData = results.data.results.map((res, i) => ({
        image: res.picture.large,
        firstName: res.name.first,
        lastName: res.name.last,
        phone: res.phone,
        email: res.email,
        dob: res.dob.date,
        key: i
      }));

      this.setState({ originalResults: tableData, displayResults: tableData });
    });
  }

Затем фильтрация может быть выполнена, как только произойдет onChange:

  onChange = e => {
    const query = e.target.value;

    this.setState(prevState => ({
      displayResults:
        query.length > 0
          ? this.filterResults(query, prevState.originalResults)
          : prevState.originalResults
    }));
  };

и аналогично для сортировки, который может быть выполнен с отображением результатов, а не с целым, что означает, что теперь вы можете сортировать отфильтрованные результаты.

Я создал здесь пример https://codesandbox.io/s/sad-cannon-d61z6

I уничтожил все недостающие функции.