Сохранить API-ответ для массива с помощью реагирования useState

Question

Я новичок в реакции крючков. Я пытаюсь преобразовать ответ API в массив, используя hook useState. Это дает мне пустое значение при использовании следующего подхода

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 => {});
}, []);

Затем я использовал следующий подход и увидел, что данные печатаются в журнале консоли

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)

Но когда я пытаюсь итерируйте этот массив записей в моем JSX, он дает мне пустой массив.

  </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>
        )}

Не могли бы вы помочь мне решить эту проблему?

Answer 1

Вот минимальный пример того, чего вы пытаетесь достичь. Это рабочий код:

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

Вот ссылка на пример в codeSandBox : https://codesandbox.io/s/jovial-snow-773kp