React.js：如何創建 loadMore 功能 onClick？

Question

我正在嘗試使用loadMore按鈕實現一個小應用程序。
默認情況下，它應該 output 3 個數據，並且每次用戶單擊加載更多按鈕時顯示 3 個數據。
嘗試了多種方法，我想出了本文建議的解決方案。
這是codesandox鏈接

應用程序.js

  let arrayForHoldingStories = [];
  const [topStoryIds] = useStories();
  const [storiesToShow, setStoriesToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = (start, end) => {
    const slicedStories = topStoryIds.slice(start, end);
    arrayForHoldingStories = [...arrayForHoldingStories, ...slicedStories];
    setStoriesToShow([...arrayForHoldingStories, ...slicedStories]);
  };

  useEffect(() => {
    loopWithSlice(0, storiesPerPage);
  }, [topStoryIds]);

  const handleShowMorePosts = () => {
    let loadedMore = next + storiesPerPage;
    loopWithSlice(next, loadedMore);
    setNext(next + storiesPerPage);
  };

但問題是合並初始數組和新數組，它們具有相同的元素並且會引發錯誤

Warning: Encountered two children with the same key, `26991887`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

我試圖通過forEach從 arrays 中刪除重復項，或者在合並之前set函數，但也沒有工作。 我的嘗試

  const loopWithSlice = (start, end) => {
    const slicedStories = topStoryIds.slice(start, end);
    arrayForHoldingStories = [...arrayForHoldingStories, ...slicedStories];

    setStoriesToShow([...arrayForHoldingStories, ...slicedStories]); //it throws mentioned error  
    /* slicedStories.forEach((uniqueId) => { //this will also throw same error
      arrayForHoldingStories.forEach((addedId) => {
        if (uniqueId !== addedId) {
          setStoriesToShow([...slicedStories, ...arrayForHoldingStories]);
        }
      });
    }); */

    /*   setStoriesToShow([   //this will also throw same error
      ...new Set([...arrayForHoldingStories, ...slicedStories])
    ]); */
  };

任何幫助將不勝感激。

Answer 1

根據您的描述，您不需要使用切片 function 結束或啟動 arguments 到您的循環。 您可以使用storiesToShow state 的長度

import React, { useState, useEffect } from "react";

import Stories from "./Stories";
import useStories from "./hooks/useStories";

function App() {
  const storiesPerPage = 3;
  let arrayForHoldingStories = [];
  const [topStoryIds] = useStories();
  const [storiesToShow, setStoriesToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = () => {
    const toShow = topStoryIds.slice(
      storiesToShow.length,
      storiesToShow.length + storiesPerPage
    );
    setStoriesToShow([...storiesToShow, ...toShow]);
  };

  useEffect(() => {
    if (topStoryIds) {
      loopWithSlice();
    }
  }, [topStoryIds]);

  const handleShowMorePosts = () => {
    let loadedMore = next + storiesPerPage;
    loopWithSlice(next, loadedMore);
    setNext(next + storiesPerPage);
  };

  console.log("next", next);
  console.log("storiesPerPage", storiesPerPage);
  console.log("loopWithSlice", loopWithSlice);
  console.log("arrayForHoldingStories", arrayForHoldingStories);
  console.log("storiesToShow", storiesToShow);

  return (
    <>
      <div>
        {storiesToShow.length > 0 &&
          storiesToShow.map((storyId) => (
            <Stories storyId={storyId} key={storyId} />
          ))}
      </div>
      <button onClick={handleShowMorePosts}>load more</button>
    </>
  );
}

export default App;

您可以在此處查看 sanbox以獲取完整代碼。