React generates infinite errors while fetching from api

Question

I am new to React.js, and I am trying to fetch from an api into a state . But when I do this, after a change in the json code from the api or after some time, I get infinite errors: TypeError: Failed to fetch and Posts.js:10 GET http://localhost:3000/data net::ERR_CONNECTION_REFUSED .

My posts controller:

import React, { useState } from 'react';
import Post from './Post';
import axios from 'axios';


const Posts = () => {
    const [posts, setPosts] = useState([]);


    fetch("http://localhost:3000/data")
    .then(res => res.json())
    .then(
      (result) => {
        setPosts((prev) => prev = result);
      }
    )
    .catch((error) => {
        console.log(error);
      });

    return (
        posts.map((post, index) => (
            <Post name={post.name} content={post.content} key={index}/>
        ))
    );
}
export default Posts;

But it is normal to get infinite errors ? And in my console for my API I get infinite request while I am on the website — Andrei Bunea
– Andrei Bunea, Commented Aug 23, 2020 at 3:21
You should also only fetch on initial render - put the fetch inside a useEffect(fn, []) — CertainPerformance
– CertainPerformance, Commented Aug 23, 2020 at 3:22

Shubham Verma · Accepted Answer · 2020-08-23 03:25:18Z

1

First thing you need to wrap api call in function. Otherwise it will re-render every time component renders:

import React, { useState,useEffect } from 'react';
import Post from './Post';
import axios from 'axios';


const Posts = () => {
    const [posts, setPosts] = useState([]);
    
    useEffect(() => {
    fetchPost();
     },[])

    const fetchPost = () => {
        fetch("http://localhost:3000/data")
        .then(res => res.json())
        .then(
        (result) => {
          setPosts((prev) => prev = result);
         }
        )
        .catch((error) => {
         console.log(error);
        });
     }

    return (
        posts.map((post, index) => (
            <Post name={post.name} content={post.content} key={index}/>
        ))
    );
}
export default Posts;

If you need only api when component than pass empty array as dependency. Otherwise variable in which you want to run fetchApi in useEffect([] <- here).

Posts.js:10 GET http://localhost:3000/data net::ERR_CONNECTION_REFUSED

This error generally comes when your backend is not working

answered Aug 23, 2020 at 3:25

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrei Bunea Over a year ago

It works, but what's the point of state if react fetches only one time the data from that api ?

Shubham Verma Over a year ago

It means like fetching api when component load first time. If its one time data and only update . Not frequent action will change any data so no new fetch is required. if you pass empty array [] in useEffect. It works like componentDidMount of class based. But you passed [variable] in dependency. It kind of work componentDidUpdate where it will run whenever variable value change

Andrei Bunea Over a year ago

Oh I see, so you have to chose if you want only one update or update on change by passing or not that variable ?

Shubham Verma Over a year ago

Yes correct. If you do not want to call it every time. Pass empty array. If you want to call when certain variable update. Then pass that variable. it will run only for that variable change + first time render

Shubham Verma Over a year ago

Anytime :-) updated above comment basically if empty array is given in only run first time

|

Collectives™ on Stack Overflow

React generates infinite errors while fetching from api

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related