React错误中超出最大更新深度

Question

因此，我试图将一些道具从孩子发送给父母，但出现此错误。我试图将回调函数从子级发送到父级，然后在子级组件中调用该函数。我以前曾经用过，但是这次我收到了这个错误。

这里是我的父组件。

import React from 'react';
import AppBar from '@material-ui/core/AppBar';

import SideDrawer from './SideDrawer';

class Header extends React.Component {

    state={
        drawerOpen:false
    }

    toggleDrawer = (value)=>{
        this.setState({
            drawerOpen: value
        });
    }


    render(){
        return(

              <AppBar>

                    <SideDrawer
                         open={this.state.drawerOpen}
                         onClose={this.toggleDrawer}
                       />    

              </AppBar>

        );
    }
}

export default Header;

这里是子组件

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';


const SideDrawer = (props) => {
    return (
       <Drawer
         anchor="right"
         open={props.open}
         onClose={props.onClose(false)}
       >

       </Drawer>
    );
};

export default SideDrawer;

Answer 1

您收到此错误，因为您正在触发连续更新。

您的<Drawer />组件直接触发onClose道具。为了防止这种情况，您可以按如下所示编写组件：

<Drawer
   anchor="right"
   open={props.open}
   onClose={() => props.onClose(false)}
>
</Drawer>

这样，它只会被触发onClose

要获得完整的循环细节，这里是：

• 渲染抽屉，触发onClose。
• onClose更新了抽屉的打开值
• 状态已更新，请重新渲染SideDrawer，因为它使用状态中的drawerOpen值
• 渲染抽屉，触发onClose。
• 然后循环再次开始，有点无穷大