React 应用程序在无限滚动实施后不会重新呈现

Question

大家好，希望有人能帮我解决一个问题。 我构建了一个 function，它从后端获取用户帖子并将它们作为响应返回：

const [posts, setPosts] = useState([]);

const newsFeed = async () => {
await axios
  .post(`${process.env.REACT_APP_API}/news-feed`)
  .then((res) => {
    setPosts(res.data);
  })
  .catch((err) => {
    console.log(err);
  });
};

这个 function 被useEffect调用，并且每当帖子被提交、喜欢、评论等时也会被调用，因此用户的帖子每次被修改或添加时总是重新呈现。

在我决定对我的应用程序实施Infinite Scroll之前，它一直运行良好。 我安装了 npm package react-infinite-scroll-component并将我的 function 修改为如下所示：

const [posts, setPosts] = useState([]);
const [page, setPage] = useState(1);

const newsFeed = async () => {
await axios
  .post(
    `${process.env.REACT_APP_API}/news-feed/${page}`)
  .then((res) => {
    let newPosts = posts;
    newPosts = newPosts.concat(res.data);
    setPosts(newPosts);
    setPage(page + 1);
  })
  .catch((err) => {
    console.log(err);
  });
};

无限滚动工作正常，但现在每次调用此 function 时都不会重新呈现帖子，而是我需要刷新页面才能看到更改。 我尝试在我的postSubmit / likeHandler函数上再次将page的 state 重置回 1，但这没有任何效果。 我在控制台中没有看到任何错误，所以不确定发生了什么。

Answer 1

替换let newPosts = posts; 用let newPosts = [...posts]; 将相同的数组引用传递给setState不会导致更新，因为值没有改变。 通过使用[...posts] ，您正在创建一个新数组，导致组件更新。