Bagaimana untuk menambah, memadam, mengubah suai dan bertanya data dalam React Query?

Bagaimana untuk menambah, memadam, mengubah suai dan bertanya data dalam React Query?

Dalam pembangunan web moden, seni bina pemisah bahagian hadapan dan belakang digunakan secara meluas. Sebagai pembangun bahagian hadapan, kami biasanya perlu berinteraksi dengan data bahagian belakang, termasuk menambah (Buat), memadam (Padam), mengemas kini (Kemas kini) dan pertanyaan (Pertanyaan). Untuk memudahkan operasi ini dan meningkatkan kecekapan pembangunan, perpustakaan React Query telah menjadi pilihan popular. Artikel ini akan memperkenalkan cara menggunakan React Query untuk menambah, memadam, mengubah suai dan bertanya data.

React Query ialah perpustakaan pengurusan negeri yang memfokuskan pada mengurus data tak segerak. Ia menyediakan set alat dan API yang berkuasa untuk mendapatkan semula, mengemas kini dan memadam data, serta mengurus caching dan penolakan data secara automatik.

Pertama, kita perlu memasang dan mengkonfigurasi React Query. Anda boleh memasang React Query menggunakan arahan berikut:

npm install react-query

atau

yarn add react-query

Kemudian, tambahkan React Query Provider dalam komponen akar aplikasi anda:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件 */}
    </QueryClientProvider>
  );
}

Seterusnya, mari kita lihat cara melaksanakan data dalam React Query Add , padam, ubah suai dan semak.

Buat/tambah data

Untuk mencipta data baharu, kita boleh menggunakan cangkuk useMutation. Cangkuk ini menerima fungsi sebagai parameter dan digunakan untuk menghantar permintaan dan mencipta data baharu. Fungsi ini mesti mengembalikan Janji dan menyelesaikannya selepas data berjaya dibuat. useMutation hook。这个 hook 接收一个函数作为参数，用于发送请求并创建新的数据。这个函数必须返回 Promise，并在数据创建成功后进行 resolve。

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们使用了 useMutation hook 来创建一个名为 CreateData 的组件。mutate 函数用于触发请求并创建新的数据。在这个例子中，我们发送一个 POST 请求到 /api/data 地址，并将新的数据作为请求的正文。请求成功后，通过调用 res.json() 方法来解析响应，并在 Promise resolve 后返回数据。

删除数据

要删除数据，我们可以再次使用 useMutation hook，并发送一个 DELETE 请求。类似于创建数据的例子，我们需要传递一个删除的函数，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们定义了一个名为 DeleteData 的组件，并使用 useMutation hook 创建了一个删除函数。这个函数发送一个 DELETE 请求到 /api/data/{dataId} 地址，其中 {dataId} 是要删除的数据的唯一标识符。请求成功后，我们将结果作为 Promise resolve 返回。

更新数据

要更新数据，我们可以再次使用 useMutation hook，发送一个 PUT 或者 PATCH 请求。类似于创建数据和删除数据的例子，我们需要传递一个函数用于更新数据，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们创建了一个名为 UpdateData 的组件，并使用 useMutation hook 创建了一个更新函数。这个函数发送一个 PUT 请求到 /api/data/{dataId} 地址，并将更新的数据作为请求的正文。请求成功后，我们将结果作为 Promise resolve 返回。

查询数据

要查询数据，在 React Query 中我们可以使用 useQuery hook。这个 hook 接收一个函数作为参数，并返回一个包含数据的对象。在函数中，我们发送一个 GET 请求，并在响应中解析数据。

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}

在上面的代码中，我们使用了 useQuery hook 创建了一个名为 GetData 的组件。useQuery hook 接收一个字符串作为标识符，并在请求成功后自动缓存数据。我们发送一个 GET 请求到 /api/data/{dataId}rrreee

Dalam kod di atas, kami menggunakan cangkuk useMutation untuk mencipta komponen bernama CreateData. Fungsi mutate digunakan untuk mencetuskan permintaan dan mencipta data baharu. Dalam contoh ini, kami menghantar permintaan POST ke alamat /api/data dan memasukkan data baharu sebagai isi permintaan. Selepas permintaan berjaya, respons dihuraikan dengan memanggil kaedah res.json() dan data dikembalikan selepas Promise diselesaikan.

Padam data🎜🎜Untuk memadam data, kami boleh menggunakan cangkuk useMutation sekali lagi dan menghantar permintaan DELETE. Sama seperti contoh cipta data, kita perlu lulus fungsi padam dan selesaikan selepas fungsi itu mengembalikan hasil kejayaan. 🎜rrreee🎜Dalam kod di atas, kami menentukan komponen bernama DeleteData dan mencipta fungsi padam menggunakan cangkuk useMutation. Fungsi ini menghantar permintaan DELETE ke alamat /api/data/{dataId}, dengan {dataId} ialah pengecam unik data yang akan dipadamkan. Selepas permintaan berjaya, kami mengembalikan hasilnya sebagai azam Janji. 🎜🎜Kemas kini data🎜🎜Untuk mengemas kini data, kami boleh menggunakan cangkuk useMutation sekali lagi dan menghantar permintaan PUT atau PATCH. Sama seperti contoh mencipta data dan memadam data, kita perlu lulus fungsi untuk mengemas kini data dan menyelesaikannya selepas fungsi itu kembali berjaya. 🎜rrreee🎜Dalam kod di atas, kami mencipta komponen yang dipanggil UpdateData dan mencipta fungsi kemas kini menggunakan cangkuk useMutation. Fungsi ini menghantar permintaan PUT ke alamat /api/data/{dataId} dengan data yang dikemas kini sebagai isi permintaan. Selepas permintaan berjaya, kami mengembalikan hasilnya sebagai azam Janji. 🎜🎜Data pertanyaan🎜🎜Untuk pertanyaan data, dalam React Query kita boleh menggunakan cangkuk useQuery. Cangkuk ini menerima fungsi sebagai hujah dan mengembalikan objek yang mengandungi data. Dalam fungsi, kami menghantar permintaan GET dan menghuraikan data dalam respons. 🎜rrreee🎜Dalam kod di atas, kami menggunakan cangkuk useQuery untuk mencipta komponen bernama GetData. Cangkuk useQuery menerima rentetan sebagai pengecam dan menyimpan data secara automatik selepas permintaan berjaya. Kami menghantar permintaan GET ke alamat /api/data/{dataId} dan menghuraikan data dalam respons. Semasa pemuatan data, kami memaparkan teks "Memuatkan..." Jika ralat berlaku, kami memaparkan teks ralat. 🎜🎜Ringkasnya, kami telah mempelajari cara menggunakan React Query untuk menambah, memadam, mengubah suai dan membuat pertanyaan data. React Query menyediakan banyak alatan dan API yang berkuasa untuk memudahkan pengurusan data dan interaksi. Dengan menggunakan alatan dan API ini, kami boleh memanipulasi data dengan lebih mudah dan meningkatkan kecekapan pembangunan bahagian hadapan. Harap artikel ini dapat membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menambah, memadam, mengubah suai dan bertanya data dalam React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!