我有一个反应表，当我单击此不同的表时，试图将其排序

问题描述

我认为问题出在代码的信令部分以及我设置的格式中，但是从所有帐户来看，这应该可以工作，我知道我可以将其分解为if-else语句，但这绝对是首要的我在React中创建的东西，我正在尝试使用这种格式。我提供了表格的全部代码，但其余代码正常工作，这只是我要尝试进行的排序，任何提示或建议将不胜感激。另外，如果您发现代码中还有其他可以改进的地方，并且愿意接受所有可以学习和改进的建议，那么我的搜索过滤器也存在问题，但我希望能够解决该问题。

enter class AppTable extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        users: [],sorted: '',directory: 'asc',compile: [],};
}
    componentDidMount() {
        axios.get(`https://randomuser.me/api/?results=20&nat=us`)
            .then(res => {
                let users = (res && res.data) ? res.data.results: [];
              if (!users || users.length === 0){
                    this.setState({loading: false});
                    return;
                }
                const tableList = users.map(state => new User(state));
                this.setState({ compile: tableList,users: tableList });
            })
    }

    sorting(sorted) {
        const currentField = this.state.sorted;
        const users = this.state.users;
        let directory = this.state.directory;
        if (currentField === sorted) {
            directory = directory === 'asc' ? 'desc' : 'asc'
           }else{
            directory = 'asc'
           }
        this.signaling(users,sorted,directory);
        this.setState({users: users,directory: directory,sorted: sorted})
    }

    **signaling(objects,field,direction){
        const signal = direction === "asc" ? 1 : -1
        objects.sort((a,b) => (a[field] > b[field]) ? signal * 1 : ((b[field] > a[field]) ? signal * -1 : 0));
    }**

    initSearch(evt) {
        const searchValue = evt.target.value;
        const compile = this.state.compile;
        if (!searchValue){
            this.setState({users: compile});
            return;
        }
        const filtering = compile.filter((object)=>{
            return Object.keys(object).reduce((acc,curr)=>{
                return acc || object[curr].toLowerCase().includes(searchValue);
            },false);
        });
        this.setState({users: filtering});
    }

    render() {
        const throughput = this.state.users;
        return <Col>
            <Form inline className="mb-2">
                    <Form.Label className="my-1 mr-2">Search:</Form.Label>
                    <Form.Control type="text" onChange={event => this.initSearch(event)} placeholder="Search Table" />
            </Form>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th className="pointer" onClick={() => this.sorting(`${this.firstName}`)}>First Name</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.lastName}`)}>Last Name</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.email}`)}>Email</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.street}`)}>Street</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.city}`)}>City</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.state}`)}>State</th>
                    <th className="pointer" onClick={() => this.sorting(`${this.phone}`)}>Phone</th>
                </tr>
                </thead>
                <tbody>
                {throughput.map((individual,index) => (
                    <AppRow key={index} user={individual}/>
                ))}
                </tbody>
            </Table>
        </Col>;
    }
}

export default AppTable;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）