Javascript React在尝试对数据进行排序时出现过多渲染错误

我试图用从API获取的数据对表进行排序。基本上，我想要的是根据单击的单元格对表进行升序或降序排序。为此，我创建了此代码，但我做了一些错误的事情，但无法看到它。如果有人能告诉我哪里有麻烦，我会很高兴的。每次运行应用程序时，我都会收到此错误消息：

重新渲染的次数太多。React限制渲染的数量以防止无限循环。

我有什么：

import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import Moment from 'react-moment';
import _ from 'lodash'

const UserTable = ({ repoData }) => {
    const [initialObject, setInitialObject] = useState({
        column: null,
        data: repoData,
        direction: null
    });


    const handleSort = (clickedColumn) => {

        if (initialObject.column !== clickedColumn) {
            setInitialObject({
                column: clickedColumn,
                data: _.sortBy(initialObject.data, [clickedColumn]),
                direction: "ascending"
            })
            return
        }
        setInitialObject({
            data: initialObject.data.reverse(),
            direction: initialObject.direction === "ascending" ? "descending" : "ascending",
        })
    }

    return (
        <div >
            <Table sortable celled fixed>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'name' ? initialObject.direction : null}
                            onCLick={handleSort("name")}
                        >
                            Repository Name
        </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'description' ? initialObject.direction : null}
                            onCLick={handleSort("description")}
                        >
                            Description
        </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'created_at' ? initialObject.direction : null}
                            onCLick={handleSort("created_at")}>
                            Created At
        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header >
                <Table.Body>
                    {initialObject.data.map(repos => {
                        return <Table.Row>

                            <Table.Cell>{repos.name}</Table.Cell>
                            <Table.Cell>{repos.description}</Table.Cell>
                            <Table.Cell> <Moment fromNow>{repos.created_at}</Moment></Table.Cell>
                        </Table.Row>

                    })}


                </Table.Body>
            </Table>
        </div>
    );
}

export default UserTable;

import React，{useState}来自“React”；
从“语义ui反应”导入{Table}；
从“反应力矩”导入力矩；
从“lodash”导入
const UserTable=（{repoData}）=>{
常量[initialObject，setInitialObject]=useState({
列：null，
数据：repoData，
方向：空
});
常量handleSort=（单击列）=>{
如果（initialObject.column！==clickedColumn）{
setInitialObject({
栏目：点击栏目，
数据：uu.sortBy（initialObject.data，[clickedColumn]），
方向：“上升”
})
返回
}
setInitialObject({
数据：initialObject.data.reverse（），
方向：initialObject.direction==“升序”？“降序”：“升序”，
})
}
返回(
存储库名称
描述
创建于
{initialObject.data.map（repos=>{
返回
{repos.name}
{repos.description}
{repos.created_at}
})}
);
}
导出默认用户表；
问题在于单击
onClick
：

onClick={handleSort("name")} // <-- this will call the function on render it self


解决方案是，将其更改为：

onClick={() => handleSort("name")}

问题在于单击
onClick
：

onClick={handleSort("name")} // <-- this will call the function on render it self


解决方案是，将其更改为：

onClick={() => handleSort("name")}

谢谢，这才是真正的问题，但是你介意解释一下当它不是arrow函数时导致此错误的潜在原因吗？
onClick={handleSort（“name”）}
这会在不单击的情况下调用函数，arrow函数只会在单击时调用，这不是因为arrow，这是因为你正在传递parram，如果您尝试
onClick={handleSort}
这将不会调用，因为您没有调用它，您只是在传递函数ref，但使用
onClick={handleSort（“name”）}
这是您首先调用函数谢谢，这是真正的问题，但您是否介意解释一下，当它不是arrow函数时，可能会导致此错误的原因？
onClick={handleSort（“name”）}
这会在不单击的情况下调用函数，而arrow函数只会在单击时调用，这不是因为arrow，因为您正在传递parram，如果您尝试
onClick={handleSort}
这将不会调用，因为您没有调用它，您只是传递函数ref，但是使用
onClick={handleSort（“name”）}
这是您第一次调用函数