React错误：“渲染的钩子比上一次渲染时多”
React错误：“渲染的钩子比上一次渲染时多”
提问于 2021-08-09 06:13:47
我有以下组件。我在我的组件中使用了react挂钩(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 />
</>
);
}从本质上讲，我想通过单击最后一列中的删除图标来删除表行。但是，当我加载页面时，我得到了“render more hooks than the previous render”错误。我不知道该怎么解决它。有人能帮我吗？
回答 1
Stack Overflow用户
发布于 2021-08-13 16:22:05
这个错误是在AntD组件代码中抛出的，但它只是由于您指定表属性的方式而显现出来的。
问题出在expandRowRender的ClassTheory组件中，您没有正确地实例化ClassTheoryDataTable子表。
const expandedRowRender = () => {
const table = new ClassTheoryDataTable();
return table;
};在这里，您将直接调用function组件并返回它，但这不是React组件的实例化方式。在React中，您可以通过JSX描述UI，并将其传递给React，React处理整个组件生命周期，从实例化、挂载、重新渲染到卸载。
此函数应返回有效的JSX。
const expandedRowRender = () => {
return <ClassTheoryDataTable />;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68707548
复制相关文章
相似问题
腾讯云开发者
