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, May 16 '22 at 14:32
do you want to sequentially send an http request for each genre? It's hard to interpret the question — Asplund, May 16 '22 at 14:38
I found out that I have to replace forEach Here is how: https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop — Trif Ionut, May 16 '22 at 14:46

score 1 · Answer 1 · answered May 16 '22 at 15:05

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

score 1 · Answer 2 · answered May 16 '22 at 15:16

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

How to use axios in a forEach loop

2 Answers2