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] ，您正在創建一個新數組，導致組件更新。