Utiliser React Query et la base de données pour le nettoyage et la validation des données

Utilisez React Query et la base de données pour le nettoyage et la vérification des données

Dans le développement d'applications Web modernes, le traitement et la gestion des données frontales sont une tâche très importante. React Query est une bibliothèque puissante qui peut nous aider dans la gestion des données, et la base de données est un outil important pour stocker les données d'application. Cet article expliquera comment utiliser React Query et la base de données pour le nettoyage et la vérification des données, et fournira des exemples de code spécifiques.

1. Contexte
Supposons maintenant que nous disposions d'une application simple de gestion de tâches dans laquelle les utilisateurs peuvent créer des tâches et les enregistrer dans la base de données. Pendant le processus de création de tâches, nous devons nettoyer et vérifier les données saisies par l'utilisateur pour garantir la validité et la cohérence des données. Dans le même temps, nous devons également enregistrer les données de tâche dans la base de données pour des requêtes et une utilisation futures.

2. Nettoyage et vérification des données

1. Installer React Query
   Tout d'abord, nous devons installer React Query dans le projet. Il peut être installé à l'aide des commandes npm ou Yarn.

npm :

npm install react-query

yarn :

yarn add react-query

2. Créer un fournisseur de requêtes React
   Dans le fichier d'entrée de l'application, nous devons créer un fournisseur de requêtes React et l'envelopper dans la couche externe du composant App. Le fournisseur injectera les fonctions liées à React Query dans l’ensemble de l’application pour notre utilisation ultérieure.

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

const queryClient = new QueryClient();

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

export default App;

3. Utilisez le hook useMutation de React Query dans le composant
   Ensuite, dans le composant où nous devons nettoyer et vérifier les données, utilisez le hook useMutation de React Query pour gérer la soumission et la sauvegarde des données. Le hook useMutation peut nous aider à gérer l'état de la demande (tel que le chargement, le succès, l'erreur, etc.) et fournir une fonction pour gérer la logique de l'envoi de la demande et du traitement des résultats.

import React from 'react';
import { useMutation } from 'react-query';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return fetch('/api/tasks', {
      method: 'POST',
      body: JSON.stringify(newTask),
    }).then((response) => response.json());
  });

  const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    const newTask = {
      title: formData.get('title'),
      description: formData.get('description'),
      // 其他字段
    };

    createTaskMutation.mutate(newTask);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <textarea name="description" />
      {/* 其他输入框 */}
      <button type="submit">创建任务</button>
    </form>
  );
}

Dans l'exemple ci-dessus, nous utilisons une API fictive /api/tasks pour simuler la demande de création de tâche et renvoyer les détails de la tâche une fois la demande réussie. /api/tasks 来模拟任务的创建请求，并在请求成功后返回任务的详细信息。

4. 数据库连接与操作
   数据的清洗和校验完成后，我们需要将任务数据保存到数据库中。这里我们以 MongoDB 数据库为例，并使用 Mongoose 库连接和操作数据库。

首先，我们需要安装 Mongoose：

npm：

npm install mongoose

yarn：

yarn add mongoose

然后，在项目中创建 db.js

Connexion et fonctionnement de la base de données

Une fois le nettoyage et la vérification des données terminés, nous devons enregistrer les données de la tâche dans la base de données. Ici, nous prenons la base de données MongoDB comme exemple et utilisons la bibliothèque Mongoose pour connecter et exploiter la base de données.

5. Tout d'abord, nous devons installer Mongoose :
   
npm :

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/my-database', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const TaskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  // 其他字段
});

const TaskModel = mongoose.model('Task', TaskSchema);

module.exports = TaskModel;

yarn :

import React from 'react';
import { useMutation } from 'react-query';
import TaskModel from './db';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return TaskModel.create(newTask); // 使用 Mongoose 保存任务数据
  });

  // 其他代码

  return (
    {/* 表单代码 */}
  );
}

Ensuite, créez le fichier db.js dans le projet et ajoutez le code suivant :
rrreee

dans ce qui précède Dans le code, nous définissons un modèle de tâche simple et exportons le modèle pour l'utiliser ailleurs dans l'application. 🎜🎜🎜Enregistrer les données de la tâche dans la base de données🎜Ensuite, dans la fonction de rappel asynchrone du hook useMutation de React Query, nous pouvons utiliser Mongoose pour enregistrer les données de la tâche dans la base de données. 🎜🎜rrreee🎜Dans l'exemple ci-dessus, nous utilisons la méthode TaskModel.create pour enregistrer les données de tâche dans la base de données. 🎜🎜3. Résumé🎜En utilisant React Query et la base de données, nous pouvons facilement nettoyer et vérifier les données frontales et les enregistrer dans la base de données. Cela garantit la validité et la cohérence des données et améliore l'expérience utilisateur et la qualité des données de l'application. L'exemple de code ci-dessus n'est qu'un exemple simple. Dans des projets réels, il peut être étendu et optimisé en fonction des besoins spécifiques de l'entreprise. 🎜

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!