React表单提交数据分散为多个对象，如何改为单对象提交？

问题根源 #

你当前提交的data是把三个独立状态（inputs、selectedImageUrl、value）嵌套打包的结构，导致后端收到的是包含子对象的嵌套数据，而非单个平面对象。这确实是因为拆分了多个分散的状态管理。

快速修复（无需重构状态） #

在handleSubmit中创建提交数据时，将inputs的属性展开，与其他字段合并为单个平面对象：

const handleSubmit = (event) => {
  event.preventDefault();

  if (!selectedImageUrl) {
    setErrorMessage("Please select an image");
  } else if (!value) {
    setErrorMessage("Please select a size");
  } else if (!inputs.username || inputs.username.match(/[^a-zA-Z ]/)) {
    setErrorMessage("Please enter a valid first name");
  } else {
    setErrorMessage("");
    // 将inputs展开，与其他字段合并为单个对象
    const data = {
      ...inputs,
      selectedImageUrl,
      apartmentSize: value // 给value重命名为有意义的字段名，对应表单语义
    };
    console.log(data); // 此时data是包含所有字段的单个平面对象
    // 重置表单状态
    setInputs({});
    setSelectedImageUrl(null);
    setValue("");
  }
};

此时后端收到的数据结构为：

{
  "username": "xxx",
  "number": "+92 xxx-xxxxxxx",
  "cnicNumber": "xxxxx-xxxxxxx-xx",
  "selectedImageUrl": "https://xxx...",
  "apartmentSize": "25x50"
}

更优方案：合并所有状态到单个state #

将所有表单字段统一管理在一个状态对象中，避免分散状态的混乱：

1. 初始化统一状态

const [formData, setFormData] = useState({
  username: "",
  number: "",
  cnicNumber: "",
  selectedImageUrl: null,
  apartmentSize: "" // 与select的name保持一致
});

2. 修改事件处理函数

• 图片选择逻辑：

const handleClick = (url) => {
  setFormData(prev => ({ ...prev, selectedImageUrl: url }));
};

• 输入框/下拉框统一处理：

const handleChange = (event) => {
  const { name, value } = event.target;
  setFormData(prev => ({ ...prev, [name]: value }));
};

• 调整下拉框的onChange和name：

<select
  name="apartmentSize" // 改为与state字段名一致
  onChange={handleChange} // 复用handleChange
>
  <option value="">Select Apartment Size</option>
  <option value="25x50">25x50</option>
  <option value="45x65">45x65</option>
  <option value="60x90">60x90</option>
</select>

3. 提交与验证逻辑

const handleSubmit = (event) => {
  event.preventDefault();

  if (!formData.selectedImageUrl) {
    setErrorMessage("Please select an image");
  } else if (!formData.apartmentSize) {
    setErrorMessage("Please select a size");
  } else if (!formData.username || formData.username.match(/[^a-zA-Z ]/)) {
    setErrorMessage("Please enter a valid first name");
  } else {
    setErrorMessage("");
    console.log(formData); // 直接使用统一的formData，已是单个平面对象
    // 重置表单
    setFormData({
      username: "",
      number: "",
      cnicNumber: "",
      selectedImageUrl: null,
      apartmentSize: ""
    });
  }
};

额外优化建议 #

• 移除验证逻辑中无效的判断：(!selectedImageUrl && selectedImageUrl < 0)，因为selectedImageUrl是字符串或null，不会小于0，直接判断!selectedImageUrl即可。
• 表单重置时，避免将inputs设为""（原代码错误），统一使用空对象或初始状态值。

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