Javascript 如何创建一个钩子来响应事件以加载更多数据？

我正在尝试创建一个功能，如果用户单击

LOAD MORE

按钮，它将返回更多数据

我已经完成了一些代码，但每次单击“加载更多”按钮时，它都会删除前12项并设置新的12项，但我不想这样，我想保留12个旧TEM，这只是一个常规加载更多功能

const Comp=（{data}）=>{
常数postsPerPage=12
const[postsToShow，setPostsToShow]=useState（[]）
const[next，setNext]=useState（postsPerPage）
让arrayForHoldingPosts=[]
常量loopWithSlice=（开始、结束）=>{
const slicedPosts=data.products.slice（开始、结束）
arrayForHoldingPosts=[…arrayForHoldingPosts，…slicedPosts]
setPostsToShow（固定柱阵列）
}
useffect（（）=>{
loopWithSlice（0，postsPerPage）
}, [])
const handleShowMorePosts=（）=>{
loopWithSlice（下一个，下一个+后期页面）
设置下一步（下一步+后期页面）
}
返回(
{postsToShow.map（p=>…）}
加载更多
)
}

除此之外，我需要把它变成一个钩子，我将在整个应用程序中使用它

我错过了什么

---

有什么想法吗？

你不需要一个数组

arrayforholdingsposts

只要使用

setPostsToShow（[…postsToShow，…slicedPosts]）

arrayForHoldingPosts
在每次渲染后都会变为空数组，因此旧数据会丢失

钩子示例

const useLoadMore = (data, postsPerPage = 2) => {
  const [postsToShow, setPostsToShow] = useState([]);
  const [next, setNext] = useState(postsPerPage);

  const loopWithSlice = (start, end) => {
    const slicedPosts = data.slice(start, end);
    setPostsToShow( [...postsToShow, ...slicedPosts]);
  };

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


  const handleShowMorePosts = () => {
    loopWithSlice(next, next + postsPerPage);
    setNext(next + postsPerPage);
  };

  return { handleShowMorePosts, postsToShow }

}


const App = ({data}) => {
  const {handleShowMorePosts, postsToShow } = useLoadMore(data)

  return (
    <div>
      {postsToShow.map((p) => (
        <div>...</div>
      ))}
      <button onClick={handleShowMorePosts}>Load more</button>
    </div>
  );
};

const useLoadMore=（数据，postsPerPage=2）=>{
const[postsToShow，setPostsToShow]=useState（[]）；
const[next，setNext]=useState（postsPerPage）；
常量loopWithSlice=（开始、结束）=>{
const slicedPosts=data.slice（开始、结束）；
setPostsToShow（[…postsToShow，…slicedPosts]）；
};
useffect（（）=>{
loopWithSlice（0，postsPerPage）；
}, []);
const handleShowMorePosts=（）=>{
loopWithSlice（下一个，下一个+后期页面）；
设置下一步（下一步+后期页面）；
};
返回{handleShowMorePosts，postsToShow}
}
常量App=（{data}）=>{
const{handleShowMorePosts，postsToShow}=useLoadMore（数据）
返回(
{postsToShow.map（（p）=>(
...
))}
加载更多
);
};
这里有一个问题

strong textlet arrayForHoldingPosts=[]

这将在每个渲染上分配空数组

setPostsToShow应该是

const loopWithSlice = (start, end) => {
const slicedPosts = data.products.slice(start, end)
setPostsToShow(posts=>([...posts, ...slicedPosts]))
}

你知道我怎样才能把它变成钩子吗？你知道我怎样才能把它变成钩子吗？你能不能更具体一点，你到底想做什么？我需要一个useLoadMore钩子，我可以在我正在构建的应用程序中使用它。你可以制作一个通用组件，这将呈现“加载更多”按钮，并将数据作为道具接受，并将返回新数据。通过制作泛化组件是可能的@我想你需要的是这个而不是定制的钩子。