How to use axios in a forEach loop

Question

Hi I would like to use axios in a forEach loop in react, but it doesn't work, how should I change this code so that genre, will take the values from genres array

    const [Carousels, setCarousels] = useState([]);
    const genres = ["BestRated", "Newest"];
    useEffect(() => {
        const getCarousels = async (genre) => {
            try {
                let res = await axios.get(`http://localhost:4000/api/carousels/`+genre);
                setCarousels([...Carousels, res.data]);
                console.log(Carousels);
            } catch (err) {
                console.log(err);
            }
        }
        getCarousels();
    });

Where exactly is your forEach (as your wrote but it doesn't work)? — Jax-p
– Jax-p, Commented May 16, 2022 at 14:32
do you want to sequentially send an http request for each genre? It's hard to interpret the question — Asplund
– Asplund, Commented May 16, 2022 at 14:38
I found out that I have to replace forEach Here is how: stackoverflow.com/questions/37576685/… — Trif Ionut
– Trif Ionut, Commented May 16, 2022 at 14:46

The code painter · Accepted Answer · 2022-05-16 15:05:05Z

1

this is how I would go about it :

  const [Carousels, setCarousels] = useState([]);
    const genres = ["BestRated", "Newest"];
    useEffect(() => {
        const getCarousels = async (genre) => {
            try {
                const fetchCarouselPromises = geners.map(genere=>await 
                  axios.get(`http://localhost:4000/api/carousels/`+genre)
                )
                Promise.all(fetchCarouselPromises).then((values) => {             
              setCarousels([...Carousels,...values.map(value=>value.data)]);
                });
                // btw the new setted value Carousels
                // is not gonna be available until the next render
            } catch (err) {
                console.log(err);
            }
        }
        getCarousels();
    });

answered May 16, 2022 at 15:05

The code painter

1,7743 gold badges17 silver badges40 bronze badges

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

Comments

Shri Hari L · Accepted Answer · 2022-05-16 15:16:38Z

1

You can make use of Promise.all and set the state with extending its previous value.

const [carousels, setCarousels] = useState([]);
const genres = ["BestRated", "Newest"];

useEffect(() => {
    try {
        const fetchCarouselPromises = geners.map(genre =>
            axios.get(`http://localhost:4000/api/carousels/` + genre)
        )
        Promise.all(fetchCarouselPromises).then((values) => {
            setCarousels(prev => [...prev, ...values.map(value => value.data)]);
        });
    } catch (err) {
        console.log(err);
    }
});

answered May 16, 2022 at 15:16

Shri Hari L

4,9732 gold badges8 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to use axios in a forEach loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related