Bagaimana untuk menapis dan mencari data dalam React Query?

Bagaimana untuk menapis dan mencari data dalam React Query?

Dalam proses menggunakan React Query untuk pengurusan data, kami sering menghadapi keperluan untuk menapis dan mencari data. Ciri ini boleh membantu kami mencari dan memaparkan data dalam keadaan tertentu dengan lebih mudah. Artikel ini menerangkan cara menggunakan penapisan dan carian dalam React Query dan menyediakan contoh kod khusus.

React Query ialah perpustakaan untuk pengurusan data dalam aplikasi React. Ia menyediakan beberapa fungsi berkuasa untuk membantu kami mengurus dan menyimpan data dengan lebih mudah. Antaranya, dengan menggunakan QueryKeys, anda boleh menentukan kunci pertanyaan yang berbeza untuk beroperasi pada data yang berbeza.

Kunci untuk melaksanakan penapisan data dan carian dalam React Query ialah menggunakan QueryKeys untuk mencipta kunci pertanyaan secara dinamik. Dengan cara ini, kami boleh mentakrifkan kunci pertanyaan yang berbeza untuk menyesuaikan diri dengan penapisan data dan carian di bawah keadaan yang berbeza.

Pertama, kita perlu menentukan kunci pertanyaan yang mengandungi semua data. Sebagai contoh, kita boleh menggunakan "pengguna" sebagai kunci pertanyaan untuk mendapatkan data untuk semua pengguna.

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

function UserList() {
  const { data } = useQuery("users", fetchUsers);

  return (
    <div>
      {data.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

Dalam kod di atas, kami menggunakan cangkuk useQuery untuk mendapatkan semua data pengguna dan memaparkannya pada halaman. useQuery 钩子来获取所有用户的数据，并将其展示在页面上。

接下来，我们需要定义一个过滤或搜索功能所需的查询键。例如，我们可以使用 "filteredUsers" 作为查询键来获取符合某个条件的用户数据。

function UserFilter() {
  const [filter, setFilter] = useState("");

  const { data } = useQuery(
    ["filteredUsers", filter],
    () => fetchFilteredUsers(filter),
    {
      enabled: Boolean(filter),
    }
  );

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      {data && data.length > 0 ? (
        <div>
          {data.map((user) => (
            <UserCard key={user.id} user={user} />
          ))}
        </div>
      ) : (
        <div>No matching users</div>
      )}
    </div>
  );
}

在上述代码中，我们使用 useState 钩子来定义一个过滤条件的状态。然后，我们使用 useQuery

Seterusnya, kita perlu menentukan kunci pertanyaan yang diperlukan untuk penapis atau fungsi carian. Sebagai contoh, kita boleh menggunakan "filteredUsers" sebagai kunci pertanyaan untuk mendapatkan data pengguna yang memenuhi syarat tertentu.

rrreee

Dalam kod di atas, kami menggunakan cangkuk useState untuk mentakrifkan keadaan keadaan penapis. Kemudian, kami menggunakan cangkuk useQuery untuk mendapatkan data pengguna yang memenuhi syarat penapis dan memaparkannya pada halaman. Kami menggunakan tatasusunan sebagai kunci pertanyaan, di mana elemen pertama ialah nama kunci pertanyaan dan elemen kedua ialah keadaan penapis. Apabila keadaan penapis kosong, kami melumpuhkan pertanyaan untuk mengelakkan permintaan yang tidak perlu.

Dalam aplikasi praktikal, kami boleh menentukan keadaan penapis secara bebas mengikut keperluan khusus dan menggunakan kekunci pertanyaan yang berbeza mengikut senario yang berbeza.

Di atas adalah kaedah asas penapisan dan carian data dalam React Query. Melalui penggunaan kekunci pertanyaan yang fleksibel, kami boleh melaksanakan fungsi penapisan dan carian data dengan mudah. Fleksibiliti ini menjadikan React Query sebagai alat pengurusan data yang berkuasa. 🎜🎜Saya harap artikel ini dapat membantu anda melaksanakan penapisan data dan fungsi carian dalam React Query. Jika anda mempunyai sebarang soalan atau cadangan, sila tinggalkan mesej di bawah untuk berbincang dengan kami. 🎜

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