FormData、React Query、および Axios インスタンスを使用したデータの送信

現代の Web 開発では、データ送信を効率的に処理することが非常に重要です。この記事では、React アプリケーションで FormData、React Query、および Axios インスタンスを使用してデータを送信するプロセスについて説明します。

はじめに
Web アプリケーションを構築するとき、多くの場合、データをサーバーに送信する必要があります。これはさまざまな方法を使用して実行できますが、FormData、React Query、および Axios インスタンスを一緒に使用すると、強力で柔軟なアプローチが提供されます。 FormData を使用すると、フォーム フィールドとその値を表すキーと値のペアのセットを構築でき、Axios を使用して簡単に送信できます。 React Query はデータの取得と状態管理を簡素化し、サーバー側のデータの処理を容易にします。

プロジェクトのセットアップ
まず、新しい React プロジェクトをセットアップし、必要な依存関係をインストールしましょう。

バッシュ
npx create-react-app formdata-react-query-axios
cd フォームデータ-反応-クエリ-axios
npm install axios 反応クエリ
Axios インスタンスの作成
Axios インスタンスを作成すると、ベース URL やヘッダーなど、すべての HTTP リクエストのデフォルト設定を構成できます。

JavaScript
// src/api/axiosInstance.js
'axios' から axios をインポートします;

const axiosInstance = axios.create({
ベースURL: 'https://api.example.com',
ヘッダー: {
'Content-Type': 'multipart/form-data',
}、
});

デフォルトの axiosInstance をエクスポート;
React Query のセットアップ
React Query は、データのフェッチ、キャッシュ、更新のためのフックを提供します。 React Query を使用するには、アプリケーションを QueryClientProvider でラップします。

JavaScript
// src/index.js
import React from 'react';
ReactDOM を 'react-dom' からインポートします;
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(


、
document.getElementById('root')
);
フォームコンポーネントの作成
次に、FormData を使用してデータを送信するフォーム コンポーネントを作成します。

JavaScript
// src/components/MyForm.js
import React, { useState } from 'react';
import { useMutation } from 'react-query';
import axiosInstance from '../api/axiosInstance';

const MyForm = () => {
const [file, setFile] = useState(null);

const mutation = useMutation((formData) => {
return axiosInstance.post('/upload', formData);
});

const handleSubmit = (イベント) => {
イベント.preventDefault();
const formData = new FormData();
formData.append('file', file);

mutation.mutate(formData);

};

戻る (

type="ファイル"
onChange={(e) => setFile(e.target.files[0])}
/>
アップロード

);
};

デフォルトの MyForm をエクスポート;
フォーム送信の処理
フォーム コンポーネントで、FormData オブジェクトを作成し、それにファイルを追加することで、フォームの送信を処理します。 React Query の useMutation フックを使用して、Axios インスタンスを使用してデータを送信します。

JavaScript
const handleSubmit = (イベント) => {
イベント.preventDefault();
const formData = new FormData();
formData.append('file', file);

mutation.mutate(formData);
};
結論
FormData、React Query、および Axios インスタンスを組み合わせることで、React アプリケーションでのデータ送信を効率的に処理できます。このアプローチにより柔軟性が提供され、サーバーにデータを送信するプロセスが簡素化されます。

以上がFormData、React Query、および Axios インスタンスを使用したデータの送信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。