REACT: Can't set useState to an array of objects. Console log shows undefined

Question

I am using react and a mongoose/mongo database. On the page loading, I do an API call and receive an array of objects (they are "posts" with titles, descriptions, etc). I am trying to map over the data to dynamically display the post info on separate cards. I can get the data from the API call, but when I try to change state to the array of objects and console log it, I get undefined.

Attached is the photo of the code and result:

Console log of Info

The code of API call (related to pic 1 - please notice the code line numbers)

Why isn't usestate accepting the change in state from the data? Attached is my code:

import React, { useState, useEffect } from 'react'
import API from "../utils/API"


const Home = () => {

    const [PostObject, setPosts] = useState({
        title: "",
        description: "",
        image: ""
    })

    const [PostList, setList] = useState()


    useEffect(() => {
        retrievePosts()
    }, [])


    const handleInputChange = (e) => {
        e.preventDefault()
        setPosts({ ...PostObject, [e.target.name]: e.target.value })
    }


    const createPost = (e) => {
        e.preventDefault()
        setPosts({ ...PostObject, title: "", description: "", image: "" })
        API.addPost(PostObject)
            .then(retrievePosts())
    }


    const retrievePosts = () => {
        API.getPost()
            .then(res => {
                console.log(res.data);
                setList(res.data)
                console.log(PostList);
            })
    }

@CertainPerformance, corrected the change. Still getting undefined. — casinoapte
– casinoapte, Commented Jan 6, 2021 at 5:39
react queue the setState call, so it is not updated immediately, it will update the state and re-render the component so it is painted with the new data — Jaime Noel Alvarez Luna
– Jaime Noel Alvarez Luna, Commented Jan 6, 2021 at 6:06

Sinan Yaman · Accepted Answer · 2021-01-06 05:39:56Z

Why isn't usestate accepting the change in state from the data? Attached is my code:

Because you attached an empty dependency array to useEffect as in:

useEffect(() => {
        retrievePosts()
    }, [])

If you pass an empty dependency array, this useEffect will be called only once. If you want to run the useEffect after every data change you have to pass the data to the dependency array:

useEffect(() => {
            retrievePosts()
        }, [data /*i.e PostList*/])

However, be careful not to re-render the component infinite amount of times. You can check libraries like React-Query and SWR

One more thing:

I can get the data from the API call, but when I try to change state to the array of objects and console log it, I get undefined.

setState is an async call. You can't log the data right after calling setData. Take a look at this article or to this question and see if they help

Collectives™ on Stack Overflow

REACT: Can't set useState to an array of objects. Console log shows undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related