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

React Hook的状态未更新

1 个答案: