Estoy tratando de representar el componente desde una función de javascript
export const fetcher = (signal, method, route, content = null) => { return fetch(`${API_URL}${route}`, options) .then(res => { if (res.status === 401 && isLoggedIn()) // SHOW SNACKBAR HERE return Promise.reject("INVALID_TOKEN"); if (res.status === 500) // SHOW SNACKBAR HERE return Promise.reject("UNKNOWN_ERROR"); if ((res.status < 200 || res.status >= 300) && res.status !== 401) // SHOW SNACKBAR HERE return Promise.reject("UNKNOWN_ERROR"); if(res.status === 204) // SHOW SNACKBAR HERE return res.status; if (res.headers.get("Content-Type").indexOf("application/json") !== -1) // SHOW SNACKBAR HERE return res.json(); return res.status === 200 ? res.text() : res.status; }) .catch(err => { console.log(err, `${method?.toUpperCase()} ${route}`); if (err === "INVALID_TOKEN") { removeToken(); window.location = "/"; } else if (err === "UNKNOWN_ERROR") { window.location = "/500"; } else if (err.name !== 'AbortError') { window.location = '/networkerror'; } return Promise.reject(); }); };Traté de usar HOC pero esto no funcionó para mí.
¿Es posible renderizar elementos de reacción fuera del contexto de reacción?
Gracias !
No estoy seguro de que esto sea posible, al menos no en un asunto elegante.
Lo que solemos hacer al buscar es manejar los eventos relacionados en el componente que llama a la función de búsqueda.
Puede tener un estado de error que establezca de acuerdo con si la función termina en el bloque catch. Y luego puede llamar condicionalmente al componente necesario desde el renderizado.
Entonces, por ejemplo, algo como esto:
import { fetchData } from ... export function Foo() { const [error, setError] = useState(null); async const onFetch = () => { try { ... await fetch(); } catch (error) { setError(error); } } useEffect(() => { // Initial - onFetch(); }, []); return ( ... {error !== null && <SnackbarComp error={error} />} ) } Sé que esto no responde necesariamente a tu pregunta.
Siéntase libre de ignorar si no es útil.