get different values from API calls-CodePudding

I have this code for getting urls of images from faker API

var change = 1

useEffect(() => {

    async function get() {

        setloading(true)
        const i = await faker.image.fashion(120, 200)
        setimg(i)
        console.log(img)
        setloading(false)
    }
    get()
    

}, [change])

Below is the jsx code

<div className='box'>

            <h3>Latest Trends</h3>
            <
            <div className='details'>
                {loading ? ClipLoader color='#000000' loading={!loading} cssOverride={override} size={30} />
                 :
                 [1, 2, 3, 4].map(e => {
                    change = change   1
                    console.log(change);
                    return (
                        <div className='img'>
                            <img src={img} alt="" />
                        </div>
                    )
                })}
            </div>

        </div>

as you can see in the above code I am trying to run a loop 4 times using map. I want to get a different image each time from the API for every time the loop executes. The problem is that I am getting same image url for all 4 times.

Basically, I want UseEffect to run every time the loop runs and give me a different API call each time. Also, fakers API returns random images on every API call.

Edit: If I use a state variable like this I am getting infinite renders.

[1, 2, 3, 4].map(e => {
                    setchange(change   1)
                    console.log(change);
                    return (
                        <div className='img'>
                            <img src={img} alt="" />
                        </div>
                    )
                })

CodePudding user response：

If that fake API can't return a list of images, I think the better way to do it at least would be to fetch images 4 times(or any times you want) once(first render) in useEffect, and then save those returned images as an Array in state and then loop through that Array to display your images

CodePudding user response：

here is simple html and js with cdn link of faker

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="module">
        import { faker } from 'https://cdn.skypack.dev/@faker-js/faker';
      
        // Caitlyn Kerluke
        const randomName = faker.name.fullName();
      
        // [email protected]
        const randomEmail = faker.internet.email();
        for (var i = 1; i <= 5; i  ) {
            console.log(`${faker.image.fashion(120, 200, true)}`)
            let img = new Image();
            img.src = faker.image.nature(120, 200, true);
            document.getElementById('app').append(img)
        }
      </script>
      
</body>

</html>

mistake done by you.

no need to async function in useEffect.
simple use useState hook if you want to manage local state.
worst way to assing local variable from rendering change = change 1.
use last boolean param in faker api for random image like faker.image.fashion(120, 200, true)

and here is stackblitz for react find.

Faker image button in below blitz and click on it you see loaded image with in sec. https://stackblitz.com/edit/react-6ivxaj?file=src/faker/Faker.js