React TS简历表单提交异常与net::ERR_CONNECTION_RESET问题求助

问题1：非必填字段强制要求填写才能提交 #

原因分析 #

你的初始状态JobApplicationForm应该预定义了所有可能的动态字段（如education_b_degree、work_c_company等），即使未新增对应行，这些字段仍存在于inputValue中且为空值。提交时FormData会把所有空字段一并发送，后端可能默认对这些字段做了非空校验；或者前端自定义的Input/Select组件自带了隐式必填规则。

解决方案 #

1. 精简初始状态
   只在JobApplicationForm中保留默认第一行的字段（如education_a_degree、education_a_school），移除未新增行对应的字段（如education_b_*、work_b_*）。

2. 新增行时动态初始化字段
   修改handleClickAddEducation和handleClickAddWork，在新增行时才将对应字段添加到inputValue中：

   const handleClickAddEducation = () => {
     if (divEducationList.length < 2) {
       const newRowIndex = divEducationList.length;
       const letter = arrayLetters[newRowIndex].letter;
       // 初始化新增行的所有字段
       setInputValue(prev => ({
         ...prev,
         [`education_${letter}_degree`]: '',
         [`education_${letter}_school`]: '',
         // 补充其他教育经历字段，如专业、毕业时间等
       }));
       setDivEducation(prev => prev + 1);
       setDivEducationList(prev => [...prev, divEducation]);
     } else {
       alert('最多可添加2条教育经历'); // 替换throw error，避免页面崩溃
     }
   };
   

3. 提交时过滤空值字段
   在handleSubmit中只向FormData添加有实际值的字段：

   // 替换原有的keys/values循环
   Object.entries(inputValue).forEach(([key, value]) => {
     if (value.trim() !== '') { // 过滤空字符串（含纯空格）
       formData.append(key, value);
     }
   });
   

问题2：提交时出现net::ERR_CONNECTION_RESET错误 #

原因分析 #

这个错误通常是服务器主动断开连接，常见触发原因：

• 错误地将普通字符串转成Blob类型，导致FormData格式异常
• 请求头配置错误（如手动设置multipart/form-data但缺少边界符）
• 后端服务异常（如端口占用、路由配置错误、超时设置过短）
• 提交的数据包含无效格式或过大内容

解决方案 #

1. 修正FormData数据添加方式
   移除代码中强制转Blob的逻辑，FormData支持直接传入字符串、数字等普通类型：

   // 原代码：formData.append(keys[i], values[i] as unknown as Blob);
   // 修改为：
   formData.append(key, value);
   

2. 检查请求头配置
   如果没有上传文件需求，不要手动设置Content-Type: multipart/form-data，Axios会自动处理FormData的请求头及边界符。若确实需要上传文件，确保postHeaders配置正确：

   // 正确的文件上传请求头（无需手动设置boundary）
   const postHeaders = {
     'Content-Type': 'multipart/form-data'
   };
   

3. 排查后端服务状态

   • 确认后端服务在localhost:8000正常运行，无端口占用、进程崩溃情况
   • 检查/api/jobApplications路由是否正确配置，支持POST请求
   • 查看后端日志，确认是否有请求接收记录及具体报错信息

4. 增强错误排查信息
   在catch块中打印完整错误对象，便于定位问题：

   .catch((err) => {
     console.error('提交请求详情:', err); // 打印完整错误日志
     const error = 
       err.code === 'ECONNABORTED' ? '请求超时，请稍后重试' :
       err.response?.status === 404 ? '接口地址不存在' :
       '提交失败，请检查网络或后端服务';
     setError(error);
     setIsLoading(false);
   });
   

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