如何在js中将cuurent数组数据与以前的数组数据连接起来

Question

我正在我的MERN项目中进行服务器端分页。假设我从数据库中得到100个产品，并且我只想显示30个产品，每页10个产品。我希望当用户想要访问第4个页面时，我再次调用api来获取下一个30个产品，并且不应该覆盖前一个30。因此，我需要将当前数组数据与以前的数据连接起来。我该怎么做？

这是我的代码：使用useQuery调用api函数，并将offset、postsPerPage(limit)和jwttoken作为参数发送：

let { isFetching: isFetchingPage, refetch: fetchPage } = useQuery(
["pages", user],
async (user) => {

return await getProductsPage(
user?.queryKey[1]?.jwtToken,
offset,
postsPerPage,
);
},
{
enabled: false,
staleTime: 10000,
onSuccess: (data) => {
setProduct(data?.data?.data);
},
}
);

从API 获取数据

export const getProductsPage = async (token, offset, limit,)=>{


{
const data = await axios.get(`getMarketPlace`,
{
params:{
details:false, offset:offset, limit:limit
},
headers:{
'Content-Type':'application/json',
Authorization:token,

}
})
return data
}
}

它非常完美——我唯一想要的就是将currentData与以前的数据连接起来。我该怎么做？

Answer 1

您可以简单地使用排列运算符…。

onSuccess: (data) => {
const newData = data?.data?.data
if (!newData) return // return if data not valid
setProduct([…product, …newData]) // concatenate arrays
}

有关排列语法的更多信息。

Answer 2

SetState((oldState) => [...oldState, ...newData])