Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Setting State in Useeffect Hook

I want to set my state to an array of objects, my code is correctly populating an empty from the the fetched data but I am not able to set my state to that data.

Below is my code:

const [postMItems, setPostMItems] = useState([]);

let existingM = []

useEffect(() => {
    const fetchMItems = async () => {

        const endpoint = `http://${process.env.NEXT_PUBLIC_HOST}:1337/api/manufactureds?fields[0]=title&sort=id:ASC&populate[image][fields][0]=name&populate[image][fields][1]=url`
        const options = {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`
            }
        }

        const response = await fetch(endpoint, options)
        const data = await response.json();
        console.log(data);


        for (let i = 0; i < data.data.length; i++) {
            let mID = data.data[i].id
            let mName = data.data[i].attributes.title
            let mImage = data.data[i].attributes.image.data ? data.data[i].attributes.image.data.attributes.url : ''


            setPostMItems([
                ...postMItems,
                {
                    mID: mID,
                    mName: mName,
                    mImage: mImage
                }
                ]
                )
                console.log(postMItems);

            existingM.push(
                {
                    mID: mID,
                    mName: mName,
                    mImage: mImage
                }
            )

        }

        console.log(existingM)
        console.log(postMItems)
    }

    fetchMItems();

}, []);

What I am looking for is to have the same data which is being set in the existingM array to be present in the postMItems.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Try below one:

const [postMItems, setPostMItems] = useState([]);

let existingM = []

useEffect(() => {
    const fetchMItems = async () => {

        const endpoint = `http://${process.env.NEXT_PUBLIC_HOST}:1337/api/manufactureds?fields[0]=title&sort=id:ASC&populate[image][fields][0]=name&populate[image][fields][1]=url`
        const options = {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`
            }
        }

        const response = await fetch(endpoint, options)
        const data = await response.json();
        console.log(data);

        let items = postMItems
        for (let i = 0; i < data.data.length; i++) {
            let mID = data.data[i].id
            let mName = data.data[i].attributes.title
            let mImage = data.data[i].attributes.image.data ? data.data[i].attributes.image.data.attributes.url : ''


            items.push({
                mID: mID,
                mName: mName,
                mImage: mImage
            })

            existingM.push(
                {
                    mID: mID,
                    mName: mName,
                    mImage: mImage
                }
            )

        }
        setPostMItems(items)
        console.log(existingM)
        console.log(postMItems)
    }

    fetchMItems();

}, []);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading