Estoy tratando de mostrar un cuadro de diálogo basado en los datos devueltos por Apollo Hook, donde tendría que verificar que uno de los valores coincida con una identificación.
Cuando checker===true , quiero que el cuadro de diálogo se abra al renderizar y cuando el usuario haga clic en el botón Close , el cuadro de diálogo debería cerrarse.
const DialogComponent = () => { const {data, loading, error} = useQuery(GET_QUERY_DATA) const [isDialogOpen, setIsDialogOpen] = useState(false); const checker = data && data.getData.some((item_data.id === id)) const closeDialog = () => { setIsDialogOpen(false) } if(checker) { setIsDialogOpen(true) } return( <Dialog open={isDialogOpen} close={closeDialog}> // dialog content here <DialogActions> <Button onClick={closeDialog}> Close </Button> </DialogActions> </Dialog> )}Los errores anteriores con demasiados re-renderizados.
Sin embargo, probé una representación condicional, parece que el componente Diálogo nunca se abre, incluso cuando checker===true (abajo).
const DialogComponent = () => { const {data, loading, error} = useQuery(GET_QUERY_DATA) const [isDialogOpen, setIsDialogOpen] = useState(false); const checker = data && data.getData.some((item_data.id === id)) const closeDialog = () => { setIsDialogOpen(false) } if(checker) { setIsDialogOpen(true) } return( {checker && <Dialog open={isDialogOpen} close={closeDialog}> // dialog content here <DialogActions> <Button onClick={closeDialog}> Close </Button> </DialogActions> </Dialog> )}} También intenté reemplazar el valor de prop abierto con el verificador, es decir, open={checker} , sin embargo, el cuadro de diálogo nunca se puede cerrar, incluso al hacer clic en el botón Close .
Cualquier ayuda apreciada.
El botón de cerrar cierra el cuadro de diálogo, se abre de nuevo en el siguiente renderizado con
if(checker) { setIsDialogOpen(true) }Podrías hacerlo:
<Dialog open={isDialogOpen && checker} close={closeDialog}> <DialogActions> <Button onClick={closeDialog}> Close </Button> </DialogActions> </Dialog>Un problema que veo en su código es con respecto a esta parte:
if (checker) { setIsDialogOpen(true) }Cada vez que se actualiza un estado en un componente, se vuelve a llamar a la función del componente para volver a representarlo con el estado actualizado. Entonces, el fragmento anterior se ejecuta nuevamente y si el verificador es verdadero, el estado se actualiza nuevamente, luego se vuelve a reproducir una y otra vez.
Intente envolver el fragmento de código anterior dentro de un React.useEffet() como este:
React.useEffect(() => { setIsDialogOpen(checker) }, [checker])