Todavía soy nuevo en React, así que perdóname si este es un enfoque tonto para este problema.
Mi objetivo: manejo global de errores usando un proveedor de contexto y un gancho personalizado.
El problema: no puedo eliminar los errores sin que se vuelvan a agregar de inmediato.
Muestro mis errores a través de este componente en el shell...
import React, { useState, useEffect } from 'react' import Alert from '@mui/material/Alert' import Collapse from '@mui/material/Collapse' import { useAlertContext } from '@/context/alert-context/alert-context' export default function AppAlert () { const [show, setShow] = useState(false) const alertContext = useAlertContext() const handleClose = () => { alertContext.remove() setShow(false) } useEffect(() => { if (alertContext.alert) { setShow(true) } }, [alertContext.alert]) return ( <Collapse in={show}> <Alert severity='error' onClose={handleClose}> {alertContext.alert} </Alert> </Collapse> ) }Tengo una configuración de proveedor que también expone un gancho personalizado...
import React, { useState, createContext, useContext } from 'react' const AlertContext = createContext() const AlertProvider = ({ children }) => { const [alert, setAlert] = useState(null) const removeAlert = () => setAlert(null) const addAlert = (message) => setAlert(message) return ( <AlertContext.Provider value={{ alert, add: addAlert, remove: removeAlert }} > {children} </AlertContext.Provider> ) } const useAlertContext = () => { return useContext(AlertContext) } export { AlertProvider as default, useAlertContext }Y, finalmente, tengo una configuración de enlace para acceder a una API y llamar a los errores de lanzamiento si ocurre alguno mientras obtengo los datos. Estoy activando deliberadamente un 404 al pasar una ruta de API incorrecta.
import { useEffect } from 'react' import { useQuery } from 'react-query' import ApiV4 from '@/services/api/v4/base' import { useAlertContext } from '@/context/alert-context/alert-context' export const useAccess = () => { const alertContext = useAlertContext() const route = '/accessx' const query = useQuery(route, async () => await ApiV4.get(route), { retry: 0 }) useEffect(() => { if (query.isError) { alertContext.add(query.error.toString()) } }, [alertContext, query.isError, query.error]) return query }Este código parece ser el problema. Debido a que alertContext.remove() activa useEffect aquí y query.error aún existe, inmediatamente vuelve a agregar el error a la página al eliminar. Eliminar alertContext de la matriz funciona, pero no es una solución real y linter grita.
useEffect(() => { if (query.isError) { alertContext.add(query.error.toString()) } }, [alertContext, query.isError, query.error])Este es un enfoque perfectamente adecuado para el problema. También ha identificado con precisión el problema. La solución es crear un segundo gancho con acceso a los métodos que modificarán el contexto. AppAlert necesita acceso a los datos en el contexto y debe actualizarse cuando cambia AlertContext.alert. UseAccess solo necesita poder llamar a AlertContext.add, y ese método no cambiará ni activará una nueva representación. Esto se puede hacer con un segundo contexto. Simplemente puede exponer un proveedor y convertir el proveedor de acciones en el proveedor de contexto externo.
import React, { useState, createContext, useContext } from 'react' const AlertContext = createContext() const AlertContextActions = createContext() const AlertProvider = ({ children }) => { const [alert, setAlert] = useState(null) const removeAlert = () => setAlert(null) const addAlert = (message) => setAlert(message) return ( <AlertContext.Provider value={{ alert }}> <AlertContextActions.Provider value={{ addAlert, removeAlert }}> {children} </AlertContextActions.Provider> </AlertContext.Provider> ) } const useAlertContext = () => { return useContext(AlertContext) } export { AlertProvider as default, useAlertContext }Ahora, cuando necesite acceso a la alerta, use un gancho y donde necesite acceso a las acciones, use el otro.
// in AppAlert import { useAlertContext, useAlertContextActions } from '@/context/alert-context/alert-context' ... const { alert } = useAlertContext() const { removeAlert } = useAlertContextActions()Y finalmente
// in useAccess import { useAlertContextActions } from '@/context/alert-context/alert-context' ... const { addAlert } = useAlertContextActions()Así que encontré una solución que parece funcionar para mis propósitos. Obtuve una pista de este artículo. https://mortenbarklund.com/blog/react-architecture-provider-pattern/
Tenga en cuenta el uso de useCallback arriba. Asegura repeticiones mínimas de componentes usando este contexto, ya que se garantiza que la función sea estable (ya que se memoriza sin dependencias).
Entonces con esto probé lo siguiente y resolvió el problema.
import React, { useState, createContext, useContext, useCallback } from 'react' const AlertContext = createContext() const AlertProvider = ({ children }) => { const [alert, setAlert] = useState(null) const removeAlert = useCallback(() => setAlert(null), []) const addAlert = useCallback((message) => setAlert(message), []) return ( <AlertContext.Provider value={{ alert, add: addAlert, remove: removeAlert }} > {children} </AlertContext.Provider> ) } const useAlertContext = () => { return useContext(AlertContext) } export { AlertProvider as default, useAlertContext }Mi objetivo: manejo global de errores
Un problema con el enfoque useEffect anterior es que cada invocación de useAccess ejecutará sus propios efectos. Entonces, si tiene useAccess dos veces en la página y falla, recibirá dos alertas, por lo que no es realmente "global".
Le animo a que consulte las devoluciones de llamada globales en QueryCache en react-query. Están hechos para este caso de uso exacto: para manejar errores globalmente. Tenga en cuenta que para usar el contexto, necesitaría crear el cliente de consulta dentro de la aplicación y hacerlo "estable" con useRef o useState :
function App() { const alertContext = useAlertContext() const [queryClient] = React.useState(() => new QueryClient({ queryCache: new QueryCache({ onError: (error) => alertContext.add(error.toString()) }), })) return ( <QueryClientProvider client={queryClient}> <RestOfMyApp /> </QueryClientProvider> ) }También tengo algunos ejemplos en mi blog .