Wie filtere und suche ich Daten in React Query?

Wie filtere und suche ich Daten in React Query?

Bei der Verwendung von React Query für die Datenverwaltung stoßen wir häufig auf die Notwendigkeit, Daten zu filtern und zu durchsuchen. Mithilfe dieser Funktionen können wir Daten unter bestimmten Bedingungen leichter finden und anzeigen. In diesem Artikel wird erläutert, wie Filter und Suche in React Query verwendet werden, und es werden spezifische Codebeispiele bereitgestellt.

React Query ist eine Bibliothek für die Datenverwaltung in React-Anwendungen. Es bietet einige leistungsstarke Funktionen, die uns dabei helfen, Daten bequemer zu verwalten und zwischenzuspeichern. Unter anderem können Sie mithilfe von QueryKeys verschiedene Abfrageschlüssel definieren, um unterschiedliche Daten zu bearbeiten.

Der Schlüssel zur Implementierung der Datenfilterung und -suche in React Query liegt in der Verwendung von QueryKeys zum dynamischen Erstellen von Abfrageschlüsseln. Auf diese Weise können wir verschiedene Abfrageschlüssel definieren, um sie an die Datenfilterung und -suche unter verschiedenen Bedingungen anzupassen.

Zuerst müssen wir einen Abfrageschlüssel definieren, der alle Daten enthält. Beispielsweise können wir „Benutzer“ als Abfrageschlüssel verwenden, um Daten für alle Benutzer abzurufen.

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>
  );
}

Im obigen Code verwenden wir den Hook useQuery, um alle Benutzerdaten abzurufen und auf der Seite anzuzeigen. 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

rrreee

Das obige ist der detaillierte Inhalt vonWie filtere und suche ich Daten in React Query?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!