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

Question

所以我试图将一些道具从 child 发送到 parent 并收到此错误。我正在尝试将回调函数从 child 发送到 parent 并在 child 组件中调用该函数。我以前用过这个但是这次我得到了这个错误。

这是我的 Parent 组件。

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;

这是child组件

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 更新了 drawerOpen 值
状态已更新，重新渲染 SideDrawer 因为它使用来自状态

drawerOpen

绘制抽屉，触发onClose。
然后循环再次开始，无限循环

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

Maximum update depth exceeded in React error

callback

reactjs

react-props