如何从数组中每页仅显示 4 个项目反应和表达

Question

我需要 React 和 Express 方面的快速帮助。我在我的快递服务器上有一组数据，并使用反应挂钩 useEffect 获取。目前，响应显示同一页面上的所有数据，我只想每页显示 4 个项目？我的 React 组件像往常一样具有 useState、useEffect 和 JSX。请参阅下面的 Express 代码。任何形式的帮助都会很好，谢谢。

Express 服务器上的一组数据：

app.get('/api/surveyoptions', (req, res) => {
const surveyOptions = [
    // { id: 5, title: "How often do you eat meat and dairy?" },
    { id: 1, name: "diet", label: "daily1", value: "daily1"},
    { id: 2, name: "diet", label: "daily2", value: "daily2" },
    { id: 3, name: "diet", label: "daily3", value: "daily3" },
    { id: 4, name: "diet", label: "daily4", value: "daily4" },
    { id: 5, name: "diet", label: "daily5", value: "daily5"},
    { id: 6, name: "diet", label: "daily6", value: "daily6" },
    { id: 7, name: "diet", label: "daily7", value: "daily7" },
    { id: 8, name: "diet", label: "daily8", value: "daily8" }
]
res.json(surveyOptions)
})

Answer 1

不确定您的后端设置是什么以及您使用的是什么数据库，但通常您会这样做：

1. 在前端，您向 api 发出请求，包括您需要的页码作为查询参数（例如，您请求 '/api/surveyoptions?page=3'）。

*分页有不同的风格：有些喜欢页码，有些喜欢限制/偏移。这真的取决于后端/数据库/等。有关每种样式的简短说明，您可以查看 this django-rest-framefork doc 示例。

1. 服务器读取查询参数，找到与分页相关的参数（例如，我们发送了 page=3，现在服务器知道我们想要结果的第 3 页），对结果进行分页并将其发送回客户端。服务器还应该知道您想要每页有多少项目，或者它可以是一个常数（例如，每页总是 10 个项目）。应用到您的示例，服务器会将surveyOptions 数组拆分为块（每块10 个项目），然后向您发送第三个。

在反应中，您将页码存储在状态中，当用户选择另一个页面时更新它并与第一步中描述的请求一起发送。