Компонент визуализации из не реагирующего компонента

#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;}  ) }  

Я знаю, что это не обязательно ответ на ваш вопрос.
Не стесняйтесь игнорировать, если это не поможет.