使用 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中文网其他相关文章！