使用 React Query 和資料庫進行資料清洗和校驗

使用 React Query 和資料庫進行資料清洗和校驗

在現代的 Web 應用開發中，處理和管理前端資料是一個非常重要的任務。 React Query 是一個強大的函式庫，可以幫助我們進行資料管理，而資料庫則是儲存應用資料的重要工具。本文將介紹如何使用 React Query 和資料庫進行資料清洗和校驗的方法，並提供具體的程式碼範例。

一、背景
現假設我們有一個簡單的任務管理應用，使用者可以建立任務並將其儲存到資料庫中。在任務建立過程中，我們需要對使用者輸入的資料進行清洗和校驗，以確保資料的有效性和一致性。同時，我們也需要將任務資料儲存到資料庫中，以便將來查詢和使用。

二、資料清洗與校驗

1. 安裝 React Query
   首先，我們需要在專案中安裝 React Query。可以使用 npm 或 yarn 指令進行安裝。

npm：

npm install react-query

yarn：

yarn add react-query

2. 建立React Query Provider
   在應用程式的入口檔案中，我們需要建立一個React Query的Provider，並將其包裹在App 元件的外層。 Provider 會將 React Query 的相關功能注入到整個應用中，以便我們可以後續使用。

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. 在元件中使用React Query 的useMutation 鉤子
   接下來，在我們需要進行資料清洗和校驗的元件中，透過使用React Query 的useMutation 鉤子來處理資料的提交和保存。 useMutation 鉤子可以幫助我們處理請求狀態（例如loading、success、error等），並提供一個函數來處理請求傳送和結果處理的邏輯。

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

在上面的範例中，我們使用了一個mock 的API /api/tasks 來模擬任務的建立請求，並在請求成功後返回任務的詳細信息。

4. 資料庫連接與操作
   資料的清洗與校驗完成後，我們需要將任務資料儲存到資料庫中。這裡我們以 MongoDB 資料庫為例，並使用 Mongoose 庫連接和操作資料庫。

首先，我們需要安裝Mongoose：

npm：

npm install mongoose

yarn：

yarn add mongoose

然後，在專案中建立db .js 文件，並添加以下程式碼：

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;

在上述程式碼中，我們定義了一個簡單的任務模型，並匯出了該模型，以便在應用程式的其他地方使用。

5. 將任務資料儲存到資料庫
   接下來，在 React Query 的 useMutation 鉤子的非同步回呼函數中，我們可以使用 Mongoose 將任務資料儲存到資料庫中。

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 (
    {/* 表单代码 */}
  );
}

在上面的範例中，我們使用 TaskModel.create 方法將任務資料儲存到資料庫中。

三、總結
透過使用 React Query 和資料庫，我們可以方便地對前端資料進行清洗和校驗，並將其保存到資料庫中。這樣可以確保資料的有效性和一致性，並提高應用程式的使用者體驗和資料品質。上述範例程式碼只是一個簡單的範例，實際專案中可以根據需求進行擴展和最佳化，以滿足具體的業務需求。

以上是使用 React Query 和資料庫進行資料清洗和校驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！