问题描述
在我的反应表中选择一行时出现错误。问题是(可能)由无限重渲染循环引起的。流程如下:
- 我想选择一行。
- react-table 使用 useMountedLayoutEffect() 方法来通知 const selectedFlatRows(所有选定行的列表)是否已更改。
- useMountedLayoutEffect() 然后调用一个方法来导出所有选定的行。被调用的 Method 由其父级使用 props 提供给 table 组件。功能简单如下:
useMountedLayoutEffect(() => {
exportSelectedRows(selectedFlatRows)
},[selectedFlatRows]);
4、react-table 的父组件是一个材质 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 内重复调用 setState 或 组件DidUpdate。 React 将嵌套更新的数量限制为 防止无限循环。
我似乎遇到了无限重渲染循环,但我找不到问题所在。有没有人对我可以尝试解决这个问题有什么建议?
解决方法
我确实解决了问题。刚刚在创建表的数据数组时忘记使用 React.useMemo 了。