2 回答

TA貢獻1833條經驗 獲得超4個贊
您不需要數組arrayForHoldingPosts ,只需使用 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>
);
};

TA貢獻1811條經驗 獲得超5個贊
這里有一個問題,
strong textlet arrayForHoldingPosts = []
這將在每個渲染器上分配空數組。
setPostsToShow 應該是,
const loopWithSlice = (start, end) => {
const slicedPosts = data.products.slice(start, end)
setPostsToShow(posts=>([...posts, ...slicedPosts]))
}
添加回答
舉報