使用 react useState 将 api 响应存储到数组

Question

I am new to react hooks. I am trying to cast API response into an array using react useState hook. It's giving me empty with the below approach

const [post, setPostArray] = useState([]);

useEffect(() => {
  const postparams = { userList: result };
  axios
    .get(environment._urlPosts, { headers, params: postparams })
    .then(posts => {
      // storing response data in array
      setPostArray(posts.data.post);

      console.log(post);
    })
    .catch(err => {});
}, []);

Then I used the below approach and I was able to see data is printing in the console log

axios.get(environment._urlPosts, { headers, params: postparams }).then(posts => {
  // storing response data in array
  for (let obj of posts.data.post) {
      post.push(obj)
  }
  setPostArray(post)
  console.log(post)

But when I try to iterate this post array in my JSX, it's giving me empty array.

  </div>
{/* array length */}
        {post.length}

        {post.map(post =>
            <div className="card">
                <Post username={post.username} fullname={post.fullname} postedTime={post.postedTime} postContent='Hi' tweeterLike={post.tweeterLike} />
            </div>
        )}

Can you please help me to resolve this?

Answer 1

Here is a minimal Example of what you are trying to achieve. This is the working code:

import React, {useEffect, useState} from "react";
import "./styles.css";

export default function App() {
  const [post, setPostArray] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
      console.log(json);
      setPostArray([json]);
  })
    //  setPostArray([{name: 'a'}, {name: 'b'},{name: 'c'}])
},[])

console.log(post)
  return (
    <div className="App">
      {
        post.map(item => <div>{item.title} </div>)
      }
    </div>
  );
}

Here is the link to the example in codeSandBox : https://codesandbox.io/s/jovial-snow-773kp