Why my axios get not always working in React

Question

I try to fetch data from blogger api.

const NajnowszeWpisy = () => {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        axios
            .get(
                'https://www.googleapis.com/blogger/v3/blogs/****/posts?key=****'
            )
            .then((res) => {
                setArticles(res.data.items);
            });
    });

Then check if there are any articles (in my blog). Check if there is any image in blog content, if yes, convey it to props.

    if (articles.length) {
        console.log('get');
        let image = '';
        const lastPost = articles[articles.length - 1];

        if (lastPost.content.match(/<img\s+[^>]*src="([^"]*)"[^>]*>/i)) {
            image = ReactHtmlParser(
                lastPost.content.match(/<img\s+[^>]*src="([^"]*)"[^>]*>/i)[0]
            );
        }

        return (
            <StyledContainer>
                <Post
                    image={
                        image ? (
                            image
                        ) : (
                            <img src={defaultImage} alt="default-img" />
                        )
                    }
                    title={lastPost.title ? lastPost.title : 'Nowy Artykuł'}
                    content={lastPost.content}
                    id={lastPost.id}
                    key={lastPost.id}
                />
            </StyledContainer>
        );
    } else {
        console.log('no get');
    }
};

In response i get error GET 429, so there are too many requests.

Also I can't get any of my console.log messages ('get' or 'no get').

Can you tell me if I missed something?

Where does all the code from the second snippet live? Please include complete code examples. — Drew Reese, Jul 09 '20 at 06:38
Does this answer your question? [Infinite loop in useEffect](https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect) — tanmay, Jul 09 '20 at 06:44
First of all you're missing a trailing array at the end of your useEffect. If you console.log before you setArticles, you'll probably notice that you're hammering the API with calls. Maybe the API is blocking you? If you put an empty array in, you'll only render (use the GET once). — Stephan Bakkelund Valois, Jul 09 '20 at 06:45
This happens because useEffect is triggered after every render, This causes an infinite loop, To make your useEffect run only once, pass an empty array [] as the second argument. FYI : because of your infinite looping axios is always send request from there you get `429 Too Many Requests response`. — Rio A.P, Jul 09 '20 at 06:46

score 4 · Accepted Answer · answered Jul 09 '20 at 06:41

You should try to pass an empty array as second argument to useEffect to run your function only once after initial render:

useEffect(() => {
    axios
        .get(
            'https://www.googleapis.com/blogger/v3/blogs/****/posts?key=****'
        )
        .then((res) => {
            setArticles(res.data.items);
        });
}, []);

From React docs:

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

Thanks, now my 429 GET error disappeared but lastPost is still undefined — mat-999.jody, Jul 09 '20 at 07:10
You should check that your Google request returns a JSON, that the JSON has an `items` key, that your `articles` is set (add a `console.log` after your `useState()`). — SLePort, Jul 09 '20 at 07:22

Why my axios get not always working in React

1 Answers1