在无限滚动实现后，响应应用程序不重新呈现

Question

伙计们希望有人能帮我解决一个问题。我构建了一个函数，该函数从后端获取用户的帖子并作为响应返回：

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

该函数由useEffect调用，每当提交、喜欢、评论等帖子时，用户的帖子总是在每次修改或添加时重新呈现。

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

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

无限滚动运行得很好，但是现在这个函数每次调用时都不会重新呈现这些帖子，相反，我需要刷新页面才能看到更改。我尝试在我的postSubmit/likeHandler函数上将postSubmit/likeHandler的状态重新设置为1，但这没有任何效果。我没有看到任何错误的控制台，所以我不知道是怎么回事。

Answer 1

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