Tengo un componente principal que contiene un cuadro de diálogo Material UI (hijo). Ahora, el propósito de este cuadro de diálogo es obtener y mostrar datos de la API REST.
Actualmente esto funciona implementando UseEffect() en el componente Dialog. Sin embargo, tan pronto como se monte el componente principal, se activará UseEffect() dentro del componente secundario. al mismo tiempo).
Ahora, lo que me hizo pensar es que quiero que este cuadro de diálogo solo se monte cuando se haga clic en el botón para mostrarlo . ¿Es eso posible?
Este es el fragmento:
Padre.js
const Parent = React.forwardRef((props, ref) => { const [openChildDialog, setOpenChildDialog] = useState(false) useEffect(() => { // function here. This also going to set value in a state that will be used for the child component }) const handleOpenChildDialog = () => { setOpenChildDialog(true) } const handleCloseChildDialog = () => { setOpenChildDialog(false) } return ( <Page> <PageTitle> Parent Component Test </PageTitle> // Dialog will only be mounted when this button is clicked. <Button onClick={handleOpenChildDialog}> Open the child dialog! </Button> <ChildDialog open={openChildDialog} onClose={handleCloseChildDialog} /> </Page> ) })Si lo que estoy preguntando no es posible, entonces estoy abierto a la alternativa siempre que UseEffect() dentro del componente de diálogo secundario no se ejecute inmediatamente cuando se monta el elemento principal.
UseEffect() se comporta de manera que se ejecuta cuando el componente se monta, actualiza y desmonta. Sin embargo, la solución que veo aquí es usar un condicional para representar su componente secundario cuando su openChildDialog cambia a true
{ openChildDialog && <ChildDialog open={handleOpenChildDialog} onClose={handleCloseChildDialog} /> }Les dejo esta increible guia para que vean en profundidad como usar este gancho: https://overreacted.io/a-complete-guide-to-useeffect/
para representar solo el componente ChildDialog cuando está abierto, simplemente envuélvalo en un condicional:
{ openChildDialog && ( <ChildDialog open={openChildDialog} onClose={handleCloseChildDialog} /> )}en términos de su efecto de uso: puede incluir una matriz como el segundo parámetro de un efecto de uso, y luego la función solo se ejecutará cuando cambie algo en la matriz, por ejemplo:
useEffect(() => { // this will run whenever any state or prop changes, as you haven't supplied a second parameter }) useEffect(() => { // this will now only run when openChildDialog changes // you can easily put a check in here to see if openChildDialog is true to only run on open }, [openChildDialog]) useEffect(() => { // an empty array means this will only run when the component is first mounted }, [])entonces, para responder a su error de ejecución useEffect-inside-child, podría hacer algo como:
useEffect(() => { if (open) { // do stuff only when the open prop changes to true here } }, [open])