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

我是个新手。我试图使用react-useState钩子将API响应转换为数组。下面的方法让我感到空虚

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中迭代这个post数组时，它给了我一个空数组

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

---

你能帮我解决这个问题吗？

这里有一个简单的例子，说明你正在努力实现的目标。 这是工作代码：

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中示例的链接：

这里是您尝试实现的一个最小示例。 这是工作代码：

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中示例的链接：

因为setState像异步函数一样工作，所以在设置后不会立即获得post状态。但是，您应该能够在JSXyeah第一种使用JSX的方法中实现这一点。谢谢。实际上你的第一句话解决了我的问题。但无论如何，我也接受了提供的答案：因为setState像异步函数一样工作，所以在设置后不会立即获得post状态。但是，您应该能够在JSXyeah第一种使用JSX的方法中实现这一点。谢谢。实际上你的第一句话解决了我的问题。但无论如何，我也接受了提供的答案：