Reactjs 如何使用DynamoDB后端实现React分页前端

我已经成功地实现了DynamoDB分页，并使用API网关和Postman进行了测试。然而，我对如何在React前端实现分页感到困惑

目前，在第一次调用后端api时，它限制返回2个带有LastEvaluatedKey的图像。 在我的React中，我将React.useEffect（）实现为：

在我的api中，我实现了调用后端的函数：

export async function getImages(idToken: string): Promise<any> {
const response = await axios.get(`${apiEndpoint}/images`, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${idToken}`
    }
}); 

let nextKey = response.data.nextKey;

if (response.data.nextKey === null) {
    console.log('No more pictures to load!');
    return
} else {
    const moreResponse = await axios.get(`${apiEndpoint}/images?nextKey=${nextKey}`, {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${idToken}`
        }
    }); 
}

// return response.data.items;
return response.data;

导出异步函数getImages（idToken:string）：Promise

以下是我的github项目：

---

只有在有标记的情况下才能进行分页。在UI应用程序的情况下，保存最后计算的键可能是困难的、反模式的。但是，您需要跟踪DDB需要的一些信息，以便知道从何处开始

我的建议是这样做-

跟踪从UI收到的第n条记录，即到目前为止获取的最后一条记录

调用下一页的请求时，使用截至现在的第n条记录调用DDB，并从此查询中获取标记

将在步骤2中找到的最后一个求值键传递给分页查询，以返回下一组元素

更新第n条记录

重复步骤2-4

---

@tara plora phulong让我们知道这是否有帮助！谢谢你，我现在明白了@anshul@TranPloraPhuong我很高兴这有帮助：）

export async function getImages(idToken: string): Promise<any> {
const response = await axios.get(`${apiEndpoint}/images`, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${idToken}`
    }
}); 

let nextKey = response.data.nextKey;

if (response.data.nextKey === null) {
    console.log('No more pictures to load!');
    return
} else {
    const moreResponse = await axios.get(`${apiEndpoint}/images?nextKey=${nextKey}`, {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${idToken}`
        }
    }); 
}

// return response.data.items;
return response.data;