использование useEffect закрывает страницу

Question

В значительной степени заголовок, когда я добавляю

   useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);

к своему компоненту, страница отображается правильно, а затем сразу же отключается. Не знаю, что я сделал не так, поскольку в документации React .

буквально то же самое:

import React from 'react';
import { useEffect } from 'react';
const Test = () => {

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Test</h1>
    </>
  );
};

export default Test;

Приложение

import { hot } from 'react-hot-loader/root';
import React from 'react';
import Navigation from './components/Navigation/Navigation.jsx';

const App = () => {
  return (
    <>
      <div>Stuff</div>
      <Navigation></Navigation>
    </>
  );
};
export default hot(App);

Навигация

/* eslint-disable react/display-name */
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import React from 'react';
import Home from './Home';
import Login from './Login';
import Logout from './Logout';
import Faq from './Faq';
import Dashboard from './Dashboard';
import Test from './Test';

const Navigation = () => {
  const isLoggedIn = false;
  return (
    <>
      <Router>
        <div>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              {isLoggedIn ? (
                <Link to='/auth/logout'>Logout</Link>
              ) : (
                <Link to='/auth/login'>Login</Link>
              )}
            </li>
            <li>
              <Link to='/auth/dashboard'>Dashboard</Link>
            </li>
            <li>
              <Link to='/faq'>FAQ</Link>
            </li>
            <li>
              <Link to='/test'>Test</Link>
            </li>
          </ul>
        </div>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <Route exact path='/auth/login'>
            <Login />
          </Route>
          <Route path='/auth/logout'>
            <Logout />
          </Route>
          <Route path='/auth/dashboard'>
            <Dashboard />
          </Route>
          <Route path='/faq'>
            <Faq />
          </Route>
          <Route path='/test'>
            <Test />
          </Route>
        </Switch>
      </Router>
    </>
  );
};

export default Navigation;

Я должен написать кое-что здесь, потому что переполнение стека решило, что я не могу публиковать код, который просили люди ...

Answer 1

Попробуйте с

   useEffect(() => {
    const fetchData = async () => {
      try {
          const result = await fetch('http://localhost.com/ping');
          console.log(result)
      } catch (e){
        console.log(e)
      }
    };
    fetchData();
  });

Вместо

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);

Answer 2

Немного покопавшись, я наконец-то получил сообщение об ошибке: "Test.jsx:26 Uncaught ReferenceError: regeneratorRuntime is not defined" Чтобы исправить это, установить регенератор во время выполнения и потребовать его глобально. Прочитайте readme времени выполнения регенератора, если вы не знаете, как это сделать.

Answer 3

Вы можете заключить вызов выборки в блок try / catch, чтобы ваш код работал гладко.

И использовать один реактивный импорт вместо двух отдельных.

import React, {useEffect} from 'react';

const Test = () => {

  useEffect(() => {
    const fetchData = async () => {
      try{
        const result = await fetch('http://localhost/ping');
        console.log(result)
      } catch(error) {
          console.log(error.message);
      }

    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Test</h1>
    </>
  );
};

export default Test;