React中使用Axios拦截器提交多类型表单字段及类型转换问题

你的问题核心是表单内数字字段均以字符串存储，后端需要整数/数字类型，用Axios请求拦截器可以全局统一处理类型转换，不用在每个提交逻辑里重复写代码，具体方案如下：

1. 明确需要转换类型的字段 #

先整理出所有需要从字符串转为数字的字段，比如：quantity、cost_price、profit、marketplace_commision、volume、edition、weight、length、width、height。

2. 在Axios封装中添加请求拦截器 #

在你封装API的文件（比如API.js）里，给Axios实例添加请求拦截器，在请求发送前自动处理数据类型：

import axios from 'axios';

// 创建Axios实例
const API = axios.create({
  baseURL: '替换为你的API基础地址',
});

// 添加请求拦截器
API.interceptors.request.use(
  (config) => {
    // 只处理POST/PUT请求的请求体
    if ((config.method === 'post' || config.method === 'put') && config.data) {
      // 跳过FormData类型（如果有文件上传场景）
      if (!(config.data instanceof FormData)) {
        const numberFields = [
          'quantity', 
          'cost_price', 
          'profit', 
          'marketplace_commision', 
          'volume', 
          'edition', 
          'weight', 
          'length', 
          'width', 
          'height'
        ];
        
        // 拷贝原数据，避免直接修改组件状态
        const processedData = {...config.data};
        
        numberFields.forEach(field => {
          if (processedData[field] && processedData[field] !== '') {
            // 根据字段类型选parseInt或parseFloat，比如数量用整数，价格用小数
            processedData[field] = field === 'quantity' || field === 'volume' || field === 'edition' 
              ? parseInt(processedData[field], 10) 
              : parseFloat(processedData[field]);
          } else {
            // 空字符串转null或保留空，根据后端要求调整
            processedData[field] = null;
          }
        });
        
        config.data = processedData;
      }
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 导出API实例
export default API;

3. 组件提交逻辑无需修改 #

你的原提交函数inventoryFormSubmit保持不变即可，拦截器会自动在请求发送前完成类型转换：

const inventoryFormSubmit=async(e)=>{
    e.preventDefault()
    let response=await API.AddInventory(inventoryFormValue)
    if(response.data.status==="success"){
      navigate("/bookCatalog")
    }
}

注意事项 #

• 字段转换规则要和后端接口要求一致，比如有些字段必须是整数，就用parseInt，小数用parseFloat。
• 如果有文件上传场景，一定要判断config.data是否为FormData，避免破坏文件上传逻辑。
• 空值处理：如果后端接受空字符串就保留，否则转为null或undefined，根据接口文档调整。

内容的提问来源于stack exchange，提问作者Rakesh Keer