usage of useEffect blanks out page

user_11864012 0
Viewed 1234

Pretty much the title, when I add

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

to my component, the page renders properly and then immediately blanks out. Not sure what I did wrong since it's literally the same in the React Documentation.

Full component:

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;

App

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

Navigation

/* 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;

I have to write some stuff here because stack overflow decided that i am not allowed to post the code that people asked for ...

react-hooks reactjs javascript
3 Answers

You could wrap the fetch call in try/catch block to run your code smoothly.

And use one react import instead of two separate. 

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;
user_41489020

Try with 

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

Instead of 

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

After poking around a bit I finally got an error message : "Test.jsx:26 Uncaught ReferenceError: regeneratorRuntime is not defined" To fix that install regenerator-runtime and require it globally. Read the readme of regenerator-runtime if you are unsure on how to do that.

user_118640120
Related