ReactJS set array data-CodePudding

I want to ask: Why userPost is empty?

function Feed() {
  const [userPost, setUserPost] = useState([]);
  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          console.log(res.data.posts);
          setUserPost(res.data.posts);
          console.log(userPost);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  console.log(userPost);

  return (<></>)
}

Result: console.log(res.data.posts)

(3) [{…}, {…}, {…}]
0: {_id: '6220c9c7c1750a6ec3618165', userId: {…}, …}
1: {_id: '6220d26dc1750a6ec36181a7', userId: {…}, …}
2: {_id: '6221de326c2cc78a2b758a63', userId: {…}, …}
length: 3
[[Prototype]]: Array(0)

Result: console.log(userPost)

[]
length: 0
[[Prototype]]: Array(0)

Thanks.

CodePudding user response：

The issue is setUserPost is an asynchronous operation. Therefore you cannot expect it to log right after the setter method.

setUserPost(res.data.posts);
console.log(userPost);

If you want to see the updated userPost value add the log to the method body of the Feed component. (Because Feed gets invoked when a state of the component updates)

function Feed() {
  const [userPost, setUserPost] = useState([]);
  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          setUserPost(res.data.posts);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  console.log(userPost);

  return <></>;
}

CodePudding user response：

Actually, it's not empty! Setting state in React is not a sync function, it's async. You're logging the state before it is changed. If you log the userPost in the body of your component function, you will see the items are there.

function Feed() {
  const [userPost, setUserPost] = useState([]);

  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          setUserPost(res.data.posts);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  // LOG HERE
  console.log(userPost);
}

CodePudding user response：

useState is asynchronous, so that's why when you try to call console.log(userPost); instantly after setUserPost(res.data.posts);, userPost has not been updated yet.

If you want to understand more, you can read this article

https://dev.to/shareef/react-usestate-hook-is-asynchronous-1hia