Maison > interface Web > js tutoriel > Traitement des requêtes de retournement de page à l'aide de React Query et de la base de données

Traitement des requêtes de retournement de page à l'aide de React Query et de la base de données

WBOY
Libérer: 2023-09-26 19:34:48
original
1312 Les gens l'ont consulté

使用 React Query 和数据库进行翻页查询处理

使用 React Query 和数据库进行翻页查询处理,需要具体代码示例

在现代的 web 应用程序中,对于处理大量数据和实现翻页功能来说,React Query 是一个非常有用的库。React Query 提供了一种简单而强大的方式来管理和缓存数据,并提供了各种功能来处理数据的获取、更新和查询。 结合 React Query 和数据库,可以轻松地实现翻页查询功能,以提供更好的用户体验。

下面是一个使用 React Query 和数据库进行翻页查询处理的示例:

首先,安装 React Query:

1

npm install react-query

Copier après la connexion

然后,创建一个包含翻页查询逻辑的组件。在这个示例中,我们将使用 PostgreSQL 数据库,并使用 pg-promise 作为 Node.js 连接器。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

import React from 'react';

import { useQuery } from 'react-query';

import { connect } from 'pg-promise';

 

// 创建数据库连接

const pgp = require('pg-promise')();

const db = pgp('postgres://username:password@localhost:5432/database');

 

const PAGE_SIZE = 10; // 每页显示的数据量

 

const PaginationExample = () => {

  const [currentPage, setCurrentPage] = React.useState(0); // 当前页数

 

  // 使用 React Query 获取数据

  const { isLoading, data, error } = useQuery(['posts', currentPage], async () => {

    const offset = currentPage * PAGE_SIZE;

    const limit = PAGE_SIZE;

 

    // 查询数据库获取数据

    const posts = await db.any('SELECT * FROM posts OFFSET $1 LIMIT $2', [offset, limit]);

 

    return posts;

  });

 

  // 处理翻页

  const handlePreviousPage = () => {

    if (currentPage > 0) {

      setCurrentPage((prev) => prev - 1);

    }

  };

 

  const handleNextPage = () => {

    setCurrentPage((prev) => prev + 1);

  };

 

  // 渲染数据和翻页按钮

  return (

    <div>

      {isLoading ? (

        <p>Loading...</p>

      ) : error ? (

        <p>Error: {error.message}</p>

      ) : (

        <>

          <ul>

            {data.map((post) => (

              <li key={post.id}>{post.title}</li>

            ))}

          </ul>

          <button onClick={handlePreviousPage} disabled={currentPage === 0}>

            Previous

          </button>

          <button onClick={handleNextPage}>Next</button>

        </>

      )}

    </div>

  );

};

 

export default PaginationExample;

Copier après la connexion

在这个示例中,我们创建了一个名为 PaginationExample 的组件。该组件使用 useQuery 钩子来获取数据。每次用户点击 "Previous" 或 "Next" 按钮时,我们更新页面的状态,并重新执行查询。

在查询中,我们使用 OFFSETLIMIT 子句来获取相应页面上的数据。OFFSET 指定从哪条数据开始获取,而 LIMIT 指定一次获取的数据量。

通过上述代码示例,我们可以看到使用 React Query 和数据库进行翻页查询处理并不复杂。React Query 简化了数据管理和查询的过程,让我们可以专注于业务逻辑而不是底层细节。结合数据库的能力,我们可以轻松地提供翻页查询功能,提升用户体验。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal