Javascript 如何使用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;

import React，{Component}来自“React”；
从“./utils/API”导入API
从“/EmployeeRow”导入EmployeeRow
类TableMain扩展组件{
状态={
结果：[]，
搜索：“，
排序器：“下降”
}
componentDidMount（）{
API.search（）
。然后（结果=>{
console.log（结果）
这是我的国家({
结果：results.data.results.map（（res，i）=>({
图片：res.picture.large，
名字：res.name.first，
lastName:res.name.last，
电话：res.phone，
电子邮件：res.email，
目的地：目的地日期，
关键：我
})
)
})
})
};
filterResults=（结果）=>{
const value=this.state.search
const finalResult=results.filter（（员工）=>{
const lastName=employee.lastName.toLowerCase（）；
const firstName=employee.firstName.toLowerCase（）
常量fullName=firstName+“”+lastName
if（全名包括（值））{
返回员工
}
});
返回最终结果
};
sortResults=（事件）=>{
const results=this.state.result
//const id=event.target.id
//如果（id=='name'）{
//}否则如果（id=='phone'）{
//}否则如果（id=='email'）{
// }
if（this.state.sortOrder==“递减”）{
结果.排序（（a，b）=>{
如果（a.firstName>b.firstName）{
返回-1
}
返回a.firstName>b.firstName？1:0
}, 
this.setState（{sortOrder:“升序”}））
}else if（this.state.sortOrder==“升序”）{
结果.排序（（a，b）=>{
if（a.firstNameb.firstName？1:0
}, 
this.setState（{sortOrder:“下行”}））
}
日志（“结果：”，结果）
这是我的国家({
结果：结果：，
isSorted：是的
})
}
onChange=e=>{
常量值=e.target.value；
如果（！值）{
this.setState（{isSearchEmpty:true}）；
}否则{
this.setState（{search:e.target.value，isSearchEmpty:false}）；
}
}
render（）{
//console.log（“State”，this.State）
让employeeResults=this.state.result
如果（此.state.isSearchEmpty）{
employeeResults=this.state.result
}否则{
employeeResults=this.filterResults（this.state.result）
}
if（this.state.isSorted）{
employeeResults=this.state.sortedResults
}
返回(
形象
名称
电话
电子邮件
出生日期
{[…employeeResults].map（（项目）=>
)}
)}
}
导出默认TableMain；

问题是：

if（this.state.isSorted）{
employeeResults=this.state.sortedResults；
}

排序时，您将

state.isSorted

设置为true，但一旦完成排序，就不会将其设置回false。然后尝试筛选时，执行以下筛选操作：

if（this.state.isSearchEmpty）{
employeeResults=this.state.result；
}否则{
employeeResults=this.filterResults（this.state.result）；
}
如果（this.state.isSorted）{//，则排序后不会重置。
employeeResults=this.state.sortedResults；
}

但是由于

this.state.isSorted

仍然为真，因此您再次使用

this.state.sortedResults

中的值

---

如果有什么明显的错误，请告诉我

由于要对相同的数据集合进行过滤/排序，因此这一点很棘手。这就是为什么您需要在渲染中执行该操作，因为您正试图维护原始列表以供以后使用

如果将列表分为两个集合：原始未修改列表和显示列表，则始终可以参考原始列表执行筛选/排序

componentDidMount（）{
API.search（）.then（结果=>{
const tableData=results.data.results.map（（res，i）=>({
图片：res.picture.large，
名字：res.name.first，
lastName:res.name.last，
电话：res.phone，
电子邮件：res.email，
目的地：目的地日期，
关键：我
}));
this.setState（{originalResults:tableData，displayResults:tableData}）；
});
}

然后，只要发生

onChange

，就可以进行过滤：

onChange=e=>{
const query=e.target.value；
this.setState（prevState=>({
显示结果：
query.length>0
？this.filterResults（查询、prevState.originalResults）