React 错误：“渲染的钩子比上一次渲染时更多”答案

【问题标题】：React Error: "Rendered more hooks than during the previous render"React 错误：“渲染的钩子比上一次渲染时更多”
【发布时间】：2021-10-12 21:08:23
【问题描述】：

我有以下组件。我在组件中使用了 react hooks (useHistory, useState)。

export default function ClassTheoryDataTable() {

const dataSource = [
    {
        key: '1',
        date: '18.03.2021',
        subject: 'Revision',
        inst: 'HASHEL',
        edit: 'edit',
        delete: 'delete'
    }
];

    let history = useHistory();
    const [tableData, setTableData] = useState(dataSource);

    const handleRedirect = (data) => {
        history.push("/ClassTheoryDetails");
    };

    const handleDelete = (key) => {
        let dataSource1 = [...tableData];
        dataSource1 = dataSource1.filter((item) => item.key !== key);
        setTableData(dataSource1);
    }

    const columns = [
        {
            title: 'Date',
            dataIndex: 'date',
            key: 'date',
            render: (text, record) => (
                <a onClick={() => handleRedirect(record)} type="text">{text}</a>
            )
        },
        {
            title: 'Subject',
            dataIndex: 'subject',
            key: 'subject',
            editable: true
        },
        {
            title: 'Inst.',
            dataIndex: 'inst',
            key: 'inst',
            editable: true
        },
        {
            title: '',
            dataIndex: 'edit',
            key: 'edit',
            width: '50px',
            render: (text, record) => (
                <Space size="middle">
                    <EditOutlined style={{ color: '#1589FF', fontSize: '15px' }} />
                </Space>
            )
        },
        {
            title: '',
            dataIndex: 'delete',
            key: 'delete',
            width: '50px',
            render: (text, record) => (
                dataSource.length >= 1 ?
                    <Popconfirm title="Sure to delete ?" onConfirm={() => handleDelete(record.key)}>
                        <CloseCircleFilled style={{ color: 'red', fontSize: '15px' }} />
                    </Popconfirm>
                    : null
            )
        }
    ];
    return (
        <>
            <Table columns={columns} dataSource={tableData} pagination={false} bordered />
        </>
    );
}

基本上我想通过单击最后一列中的删除图标来删除表格行。但是，当我加载页面时，我收到“渲染的钩子比上一次渲染时更多”错误。我不知道如何解决它。有人可以帮我吗？

【问题讨论】：

通常，这个错误意味着你有一个有条件使用的钩子。在 React 中，所有的钩子都必须存在于函数的顶层并且总是执行，而不是有条件地执行。不过，我认为您的代码没有任何问题。您是否有指向特定行的堆栈跟踪？
如果堆栈跟踪只是指向此文件，我建议注释掉行以找到有问题的行。我的猜测是handleDelete 函数，或者它的其中一行。
你确定这是有问题的代码吗？这似乎很简单，我看不到任何早期回报，或其他明显的“钩子规则”违规行为。您是否有伴随错误的堆栈跟踪和一组重现步骤，以便我们更好地了解 UI 到目前为止所做的事情？
@EldarB。是啊。有 27 堆。大多数堆栈都显示为 /node_modules/react-dom/cjs/react-dom.development.js。但是有一个堆栈显示这一行。 => new ClassTheoryDataTable /components/ClassTheoryDataTable.jsx:65，那么第65行就是useState代码（ const [tableData, setTableData] = useState(dataSource); ）
@DrewReese 实际上我是 Reactjs 的新手。所以只有我有基础知识。我的项目中有几个组件。我使用 useHistory 挂钩在组件之间进行路由。此组件中有一个带有虚拟数据的表，当我单击表中的删除图标时，我想删除表行。如果没有 handleDelete 函数，代码可以正常工作。所以我认为错误应该在这里。

标签： javascript reactjs

【解决方案1】：

错误在 AntD 组件代码中被抛出，但只是因为您指定表格道具的方式而表现出来。

问题出在expandRowRender 中的ClassTheory 组件中，您没有正确实例化ClassTheoryDataTable 子表。

const expandedRowRender = () => {
  const table = new ClassTheoryDataTable();
  return table;
};

这里你直接调用函数组件并返回它，但这不是 React 组件的实例化方式。在 React 中，您通过 JSX 描述 UI 并将其传递给 React，React 处理整个组件生命周期，从实例化、安装、重新渲染和卸载。

这个函数应该返回有效的 JSX。

const expandedRowRender = () => {
  return <ClassTheoryDataTable />;
};

【讨论】：