Question

我有一个父组件，该父组件基于变量值打开模态：

const [openFullScreenModal, setOpenFullScreenModal] = useState(false)

我有一个按钮将此变量设置为true：

setOpenFullScreenModal(true)

在我的模板中，我有一个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()（如果未指定）将在每次prop / state更新时被调用。您应该在useEffect中指定何时使用附加参数进行呼叫

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

如果您这样编写，则只会在shouldUpdateVar变量更改时调用效果。

如果您希望更新仅运行一次，则可以使用空数组useEffect(callback,[])

您可以在文档useEffect conditional

中看到它

我的模态组件重新渲染两次

1 个答案: