在我的反应表中选择一行时出现错误。这个问题（可能）是由无限的重新渲染循环引起的。过程如下：
- 我想选择一行。
- react-table 使用 useMountedLayoutEffect() 方法来通知 const selectedFlatRows（所有选定行的列表）是否已更改。
- 然后 useMountedLayoutEffect() 调用一个应该导出所有选定行的方法。被调用的 Method 由其父级使用 props 提供给 table 组件。函数很简单，如下：
useMountedLayoutEffect(() => {
exportSelectedRows(selectedFlatRows)
}, [selectedFlatRows]);
4、react-table的父组件是一个material UI Dialog。对话框基本上只是表格组件。对话框代码看起来像这样；
function AddCodesToCaseDialog(props) {
const [selectedCodes, setSelectedCodes] = React.useState("test");
const columns = React.useMemo(
() => [
{
Header: 'Code',
accessor: 'code',
},
{
Header: 'Beschreibung',
accessor: 'description',
},
],
[]
)
const data = [
{
code: "R111",
description: "asdasasgsgeqea"
},
{
code: "R12131",
description: "YYYYYYYYYYa"
}, {
code: "as111",
description: "XXXXXXXXXXXXXXa"
}, {
code: "CC111",
description: "BBBBBBfa"
},
{
code: "R1sss2131",
description: "YYYYYYyycYYYYa"
}, {
code: "asddd111",
description: "XXXXXyyyXXXXXXXXXa"
}, {
code: "CCggg111",
description: "BBBgggBBBfa"
},
]
const handleCloseModal = () => {
props.setOpen(false);
};
const dialogContent = (
<Container>
<div style={{
maxWidth: "100%",
width: "1000px",
minHeight: "500px",
flexGrow: 1,
position: "relative",
}}>
<MMTable columns={columns} data={data} tableName={"Verfügbare Codes:"}
modalView={true}
withBorder={false}
exportSelectedRows={(selectedRows) => {
setSelectedCodes(selectedRows.map((entry, index) => entry.values))
}}/>
</div>
<pre>{JSON.stringify(selectedCodes, null, 2)}</pre>
</Container>
)
const dialogActions = [
<StyledButton onClick={(event) => {
}}>Abbrechen</StyledButton>,
<StyledButton onClick={(event) => {
}}>Auswahl hinzufügen</StyledButton>
]
return (
<ResponsiveDialogSkeleton openModal={props.open}
handleCloseModal={handleCloseModal}
dialogTitle={"Codes hinzufügen"}
dialogContent={dialogContent}
dialogActions={dialogActions}
/>
);
}
export default AddCodesToCaseDialog;
- 使用这样的按钮调用包含表格的对话框。
const [openAddCodesToCaseDialog, setOpenAddCodesToCaseDialog] = React.useState(false);
return (<div>
<StyledButton onClick={() => {
debugger
setOpenAddCodesToCaseDialog(true)
}}>Code hinzufügen</StyledButton>
<AddCodesToCaseDialog open={openAddCodesToCaseDialog} setOpen={setOpenAddCodesToCaseDialog}/>
</div>)
- 一旦我在表格中选择一行，我的屏幕就会冻结，一段时间后会出现此错误：
错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。
好像我遇到了无限的重新渲染循环，但我找不到问题。有没有人对我可以尝试解决这个问题有什么建议？