Loop with fetch - React

Question

I'm trying to loop through the API to fetch data from all 5 pages into my setPosts array. I would like all the data grouped together, rather than nested into arrays. The image below shows how the data comes through now, with index 20+ being pages 2, 3, 4, etc. that I would like to display like the info before it.

  const getPosts = () => {
        for (let i = 1; i < 6; i++) {
          fetch(`/api/posts?page=${i}`)
          .then((res) => res.json())
          .then((data) => setPosts(prevPosts => [...prevPosts,  data.posts]))
          .catch((error) => console.log('Error fetching posts', error));
        } 
      };

Chukwujiobi Canon · Accepted Answer · 2024-04-17 16:58:59Z

2

This part of code seems fishy. Though the information here is a bit lacking. Deploy these changes to see if this works. The data that you fetch is an Array of Objects. you want to add it to your previous Array of Objects so do this:

.then((data) => setPosts(prevPosts => [...prevPosts, ...data]))

edited Apr 17, 2024 at 16:58

Chukwujiobi Canon

4,2192 gold badges12 silver badges31 bronze badges

answered Sep 22, 2021 at 11:19

Sobhan Jahanmard

9007 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Loop with fetch - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related