Setting State in Useeffect Hook

Question

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.

Answer 1

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

}, []);