Material UI 对话框中的 React-table 导致“错误：超出最大更新深度”选择一行并通过 useMountedLayoutEffect 导出时

如何解决Material UI 对话框中的 React-table 导致“错误：超出最大更新深度”选择一行并通过 useMountedLayoutEffect 导出时

在我的反应表中选择一行时出现错误。问题是（可能）由无限重渲染循环引起的。流程如下：

我想选择一行。
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 了。