时间戳

首页 > 解决方案 > React 错误中超出最大更新深度

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

问题描述

所以我试图将一些道具从孩子发送给父母并得到这个错误。我正在尝试将回调函数从子组件发送到父组件并在子组件中调用该函数。我以前用过这个，但这次我得到了这个错误。

这是我的父组件。

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;

标签： reactjscallbackreact-props

解决方案

您收到此错误是因为您正在触发持续更新的事情。

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

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

这样它只会被触发onClose

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

  • Drawer 被渲染，onClose 被触发。
  • onClose 更新了抽屉打开值
  • 状态已更新，重新渲染SideDrawer，因为它使用drawerOpen来自状态的值
  • Drawer 被渲染，onClose 被触发。
  • 循环又开始了，有点无限

推荐阅读