ReactJS对象数据处理：合并多对象为单个对象时需两次点击提交表单的问题

这种两次点击才生效的坑我在React项目里踩过好多次！核心原因几乎都是React状态更新的异步特性在搞鬼——你第一次提交时，试图合并的状态其实还没完成更新，第二次点击时才拿到了最新的状态值。下面给你几个针对性的解决方案，按需选就行：

方案1：直接维护完整的表单状态（最推荐） #

别把每个表单字段拆成单独的state，直接用一个对象来存所有表单数据，每次输入时更新对应字段，提交时直接用这个完整对象就行，完全避免合并的问题：

import { useState } from 'react';

function MyForm() {
  // 初始化完整的表单状态对象
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  // 统一处理输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 用函数式更新确保拿到最新的状态
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里的formData就是最新的完整对象，直接用！
    console.log('提交的完整数据：', formData);
    // 后续可以直接发请求或者做其他处理
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

方案2：提交时直接从表单收集数据（无需受控组件） #

如果你不想用受控组件，也可以在提交时直接从表单DOM里提取所有字段值，一次性构建完整对象，连状态都不用维护：

import { useRef } from 'react';

function MyForm() {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 用FormData获取表单所有数据
    const formData = new FormData(formRef.current);
    // 转换成普通JS对象
    const mergedData = Object.fromEntries(formData);
    console.log('提交的完整数据：', mergedData);
    // 后续操作
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input type="text" name="username" />
      </div>
      <div>
        <label>邮箱：</label>
        <input type="email" name="email" />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

方案3：如果必须用分散状态，用函数式更新合并 #

要是你因为业务需求，必须把每个字段存在单独的state里，那合并时一定要用函数式更新来获取最新的状态值，同时用useEffect监听合并后的状态变化，避免异步问题：

import { useState, useEffect } from 'react';

function MyForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [mergedData, setMergedData] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // 用函数式更新，prev是最新的mergedData
    setMergedData(prev => ({
      ...prev,
      username: username,
      email: email
    }));
  };

  // 监听mergedData变化，更新完成后再做后续操作
  useEffect(() => {
    if (Object.keys(mergedData).length > 0) {
      console.log('合并后的最新数据：', mergedData);
      // 这里发请求或者处理数据
    }
  }, [mergedData]);

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

关键提醒 #

React的setState是异步批量更新的，也就是说，在同一个事件回调里调用setState后，state不会立刻更新。如果你在setState之后直接访问state，拿到的还是更新前的旧值——这就是你第一次点击时合并失败的根本原因。

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