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。
然后循环再次开始，无限循环

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

1 个答案: