使用 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 formdata-react-query-axios
npm install axios react-query
建立 Axios 實例
建立 Axios 實例可讓您為所有 HTTP 請求配置預設設置，例如基本 URL 和標頭。

javascript
// src/api/axiosInstance.js
從 'axios' 導入 axios;

const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
標題：{
'內容類型': '多部分/表單資料',
},
});

匯出預設axiosInstance;
設定 React 查詢
React Query 提供了用於獲取、快取和更新資料的鉤子。要使用 React Query，請使用 QueryClientProvider 包裝您的應用程式。

javascript
// src/index.js
從 'react' 導入 React;
從 'react-dom' 導入 ReactDOM;
從 'react-query' 導入 { QueryClient, QueryClientProvider };
從“./App”導入應用程式；

const queryClient = new QueryClient();

ReactDOM.render(


,
document.getElementById('root')
);
建立表單元件
接下來，建立一個使用 FormData 傳送資料的表單元件。

javascript
// src/components/MyForm.js
從 'react' 導入 React, { useState };
從 'react-query' 導入 { useMutation };
從 '../api/axiosInstance' 導入 axiosInstance;

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

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

const handleSubmit = (事件) => {
event.preventDefault();
const formData = new FormData();
formData.append('檔案', 檔案);

mutation.mutate(formData);

}；

返回（

類型=“文件”
onChange={(e) =>; setFile(e.target.files[0])}
//>
上傳

);
};

導出預設MyForm；
處理表單提交
在表單元件中，透過建立 FormData 物件並向其附加檔案來處理表單提交。使用 React Query 中的 useMutation 鉤子透過 Axios 實例傳送資料。

javascript
const handleSubmit = (事件) =>; {
event.preventDefault();
const formData = new FormData();
formData.append('檔案', 檔案);

mutation.mutate(formData);
};
結論
透過結合 FormData、React Query 和 Axios 實例，您可以在 React 應用程式中有效地處理資料提交。這種方法提供了靈活性並簡化了將資料傳送到伺服器的過程。

以上是使用 FormData、React Query 和 Axios 實例傳送數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！