javascript - 使用 useEffect 清空页面

Question

当我添加时，标题差不多

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

对于我的组件，页面正确呈现，然后立即空白。不知道我做错了什么，因为它在 React Documentation 中实际上是相同的.

完整组件:

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();
  }, []);