reactjs - 保持以前加载的旧内容在 react 分页中

Question

我是使用 react 的新手。

我有一个来自 php 的数组。

React 正在使用 axios 打印一些帖子。
我想显示 10 个帖子，当用户向下滚动时，我会收到更多 10 个帖子。
它工作正常。问题是 react 是从屏幕上覆盖我的旧帖子，我会保留所有帖子，而不仅仅是加载新帖子......任何想法为什么 react 只保留新帖子？

我的返回:

  return (
    <>
      {posts.map((post, index) => {

        if (posts.length === index + 1) {
            number = post.id;
          return <div className={classes.post} ref={lastPostElementRef} key={post.id}>{post.titulo}</div>
        }
        else {
          return <div className={classes.post} key={post.id}>{post.titulo}</div>
        }
      })}
      <div>{loading && 'Loading...'}</div>
      <div>{error && 'Error'}</div>
    </>
  )

我的 axios:

   axios({
      method: 'GET',
      url: 'http://localhost/posts.php',
      params: { q: query, page: pageNumber },
      cancelToken: new axios.CancelToken(c => cancel = c)
    }).then(res => {
      setPosts(prevPosts => {
        return res.data
      })
      if(res.data.length < 10) {
          setHasMore(false); // total pagination items 10
      }
      else {
          setHasMore(true);
      }

谢谢。

Answer 1

当您设置 state在 functional组件，React将取代之前的状态。

当您更新状态变量时，与 this.setState 不同在组件类中，useState 返回的函数不会自动合并更新对象，而是替换它们。

解决方案:您必须在新数组中添加旧状态和新状态，然后将其设置为新状态。您可以使用 spread复制旧状态和新状态的语法。

示例:

axios({
  method: 'GET',
  url: 'http://localhost/posts.php',
  params: { q: query, page: pageNumber },
  cancelToken: new axios.CancelToken(c => cancel = c)
}).then(res => {
  setPosts(prevPosts => {
    return [...prevPosts, ...res.data, ]
  })
  if (res.data.length < 10) {
    setHasMore(false); // total pagination items 10
  }
  else {
    setHasMore(true);
  }