Максимальная глубина обновления превышена в React error - PullRequest
Новая
       6

Максимальная глубина обновления превышена в React error

1 голос
/ 11 февраля 2020

Итак, я пытался отправить некоторые реквизиты от ребенка к родителю и получил эту ошибку. Я пытаюсь отправить функцию обратного вызова от дочернего к родителю и вызвать эту функцию в дочернем компоненте. Я использовал это раньше, но на этот раз я получил эту ошибку.

Вот мой родительский компонент. 

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;

1 Ответ

3 голосов
/ 11 февраля 2020

Вы получаете эту ошибку, потому что вы запускаете постоянное обновление.

Ваш <Drawer /> компонент напрямую запускает onClose проп. Чтобы предотвратить это, вы можете написать компонент следующим образом: 

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

Таким образом, он будет срабатывать только onClose

Чтобы иметь полную деталь l oop, вот она :

  • Ящик отрисован, запущено onClose.
  • onClose обновило значение hookOpen
  • Состояние обновлено, повторите визуализацию SideDrawer, так как он использует drawerOpen значение из состояния
  • Ящик отображается, срабатывает onClose.
  • И l oop начинается снова, вид бесконечно
...