Why I get error: "Maximum update depth exceeded" when trying to sort table?

Question

我正在尝试排序 table，但在渲染中尝试使用函数时出现错误。这是我的代码片段：

/*index.jsx*/
import React, {Component,  useState } from 'react';
//Functional Component
const Row = ({id, spec, qNumber,i}) => (
    <tr>
        <th key={i} id={id} scope={"row"}>{i}</th>
        <td key={spec} id={id}>{spec}</td>
        <td key={qNumber} id={id}>{qNumber}</td>
    </tr>
);

class LightBoardPage extends Component{
    constructor(props){
        super(props);
        this.state = {
            list: [],
            error: null,
            loaded: false
        }
        this.compareBy.bind(this);
        this.sortBy.bind(this);
    }

    buildList =(data)=>{
        console.log(data);
        this.setState({list: data})
    }

    componentDidMount(){
        console.log('did mount')
        let url = './data.json';
        fetch(url)
            .then(response => response.json())
            .then(this.buildList)
            .catch(error => {
                this.setState({error});
            })
    }


    compareBy(key) {
        return function (a, b) {
            if (a[key] < b[key]) return -1;
            if (a[key] > b[key]) return 1;
            return 0;
        };
    }


    sortBy(key) {
        let arrayCopy = [...this.state.list];
        arrayCopy.sort(this.compareBy(key));
        this.setState({list: arrayCopy});
    }

    render(){
        const rows = this.state.list.map( (rowData) => <Row {...rowData}/>);
        console.log('render');
        let o=0;
        return (
            <div >
                {this.sortBy('spec')}
                <table className="table table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Specialistas</th>
                        <th>Eilės numeris</th>
                    </tr>
                    </thead>
                    <tbody>

                    {rows}

                    </tbody>
                </table>
                {this.state.error &&
                <h3>{this.state.error}</h3>
                }
                </div>
        )
    }
}
export default LightBoardPage;

如果我将 sortBy() 与 "onClick" 一起使用，它会起作用，否则我会收到此错误： Error

我是 React 的新手，我不知道我可以做些什么来进行排序。那么我可以做些什么来消除这个错误？

P.S。这是我的代码：Code

Answer 1

我写了 () => this.sortBy('spec') 并且一切都修复了

Why I get error: "Maximum update depth exceeded" when trying to sort table?

Why I get error: "Maximum update depth exceeded" when trying to sort table?

sorting

reactjs