问题描述
我已经成功实现了 DynamoDB 分页并使用 API Gateway 和 Postman 进行了测试。但是,我对如何在 React 前端实现分页感到困惑。
目前,在第一次调用后端 api 时,它限制返回 2 个图像,带有 LastEvaluatedKey。 在我的 React 中,我将 React.useEffect() 实现为:
React.useEffect(() => {
async function getAllImages() {
const result = await getimages(auth.getIdToken());
setimages(result.items);
}
try {
getAllImages();
} catch(e) {
alert(`Failed to fetch images ${e.message}`);
}
},[auth]);
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;
}
然后,我创建了一个“加载更多”按钮来加载更多图像。但是我不知道如何使用 LastEvaluatedKey 向后端调用第二次调用以加载更多图像?
这是我的github项目: https://github.com/ploratran/DogLookBook/tree/master/client
解决方法
只有当我们有一个标记时才能进行分页。在 UI 应用程序的情况下,保存 last-evaluated-key 的存储可能是困难的、反模式的。但是,您需要跟踪一些 DDB 需要的信息,以便知道从哪里开始。
我的建议是执行以下操作 -
- 跟踪从 UI 收到的第 N 条记录,即到目前为止获取的最后一条记录。
- 当调用下一页请求时,使用第 N 条记录调用 DDB 并从该查询中获取标记。
- 将在第 2 步中找到的 last-evaluated-key 传递给您的分页查询以返回下一组元素。
- 更新第 N 条记录。
- 重复步骤 2-4。