Мой компонент в моем модале перерисовывается дважды

Question

У меня есть один родительский компонент, который открывает модальное значение в переменной:

const [openFullScreenModal, setOpenFullScreenModal] = useState(false)

У меня есть одна кнопка, которая устанавливает эту переменную на true:

setOpenFullScreenModal(true)

In У меня есть шаблон, который открывается, когда openFullScreenModal равен true:

{ openFullScreenModal === true ? 
    <ModalFullScreen
        FormComponent={UsersFormPermissionsGroupPermissions}
        title="Permissões do grupo"
        onCloseModal={setOpenFullScreenModal}
        open={openFullScreenModal}
    />
    :
    <> </>
}

Это мой ModalFullScreen компонент:

const ModalFullScreen = (props) => {

    const { title, FormComponent, open, onCloseModal } = props
    const classes = modalFullScreenStyles()

    const handleClose = () => {
        onCloseModal(false)
    }

    return (
        <div>
            <Dialog fullScreen open={open} onClose={handleClose}>
                <AppBar className={classes.appBar}>
                    <Toolbar>
                        <Typography variant="h6" className={classes.title}>
                            {title}
                        </Typography>
                        <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="fechar">
                            <Typography variant="h6" className={classes.title}>
                                Cancelar
                            </Typography>
                        </IconButton>
                    </Toolbar>
                </AppBar>

                <FormComponent></FormComponent>

            </Dialog>
        </div>
    )

В моем UsersFormPermissionsGroupPermissions Я использую useEffect() для получения данных из API:

useEffect(() => {
    console.log('mounted again')
    dispatch(groupPermissionsActions.getPermissionsGroupById(idGroupCompany))
})

Я заметил, что мой API вызывается дважды, поэтому я поставил это console.log() и подтвердил, что когда я нажмите на кнопку в моем родительском компоненте, мой модал откроется, и компонент, который я передаю в мой модал, будет повторно обработан дважды.

Почему это происходит? Как я могу это исправить?

Answer 1

UseEffect(), если не указано, будет вызываться для каждого обновления проп / состояния. Вы должны указать в useEffect, когда вызов должен быть выполнен с использованием дополнительного параметра

useEffect(()=>{
    dispatch(yourAction());
},[shouldUpdateVar]);

. Если вы напишите его так, ваш эффект будет вызываться только при изменении переменной shouldUpdateVar.

Если вы хотите, чтобы обновление запускалось только один раз, вы можете использовать пустой массив useEffect(callback,[])

Это можно увидеть в документации Условие useEffect