React Hook的状态未更新

Question

我构建了一个React Hook，如下所示：

const Index = (props) => {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const getPosts = async () => {
      const posts = await getPostFromWebService()
      for (let i of posts) {
        setPosts([ ...posts, i ])
      }
    }

    getPosts()
  }, [])

  // ... remaining code
}

但是，即使web服务返回5个帖子，也只有最后一个帖子会在posts状态下更新。因此，它只收到一个帖子，而不是5个。

我在这里做错了什么？

Answer 1

听起来你想要这样的东西。在这里，我们将让useEffect监听postCount中的任何更改，这样我们就可以触发您的逻辑来获取更多的帖子。

const Index = (props) => {
  const [posts, setPosts] = useState([])
  const [postCount, setPostCount] = useState(0)

  useEffect(() => {
    const getPosts = async () => {
      const newPosts= await getPostFromWebService()

      setPosts([...posts, newPosts])
    }
  }, [postCount])

  return(
    <div>
       <button onClick={() => setPostCount(postCount + 5)}>Get more posts</button>
    </div>
  )
}