#javascript #reactjs
Вопрос:
Я пытаюсь отобразить компонент из функции javascript
export const fetcher = (signal, method, route, content = null) =gt; { return fetch(`${API_URL}${route}`, options) .then(res =gt; { if (res.status === 401 amp;amp; isLoggedIn()) // SHOW SNACKBAR HERE return Promise.reject("INVALID_TOKEN"); if (res.status === 500) // SHOW SNACKBAR HERE return Promise.reject("UNKNOWN_ERROR"); if ((res.status lt; 200 || res.status gt;= 300) amp;amp; 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 =gt; { 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(); }); };
Я пытался использовать HOC, но это не сработало для меня.
Можно ли отображать элементы react вне контекста react ?
Спасибо!
Ответ №1:
Не уверен, что это возможно, по крайней мере, в изящном вопросе.
Что мы обычно делаем при извлечении, так это обрабатываем связанные события в компоненте, который вызывает функцию извлечения.
У вас может быть состояние ошибки, которое вы устанавливаете в соответствии с тем, попадает ли функция в блок catch. И тогда вы можете условно вызвать необходимый компонент из рендеринга.
Так, например, что-то вроде этого:
import { fetchData } from ... export function Foo() { const [error, setError] = useState(null); async const onFetch = () =gt; { try { ... await fetch(); } catch (error) { setError(error); } } useEffect(() =gt; { // Initial - onFetch(); }, []); return ( ... {error !== null amp;amp; lt;SnackbarComp error={error} /gt;} ) }
Я знаю, что это не обязательно ответ на ваш вопрос.
Не стесняйтесь игнорировать, если это не поможет.