React Hooks Form onSubmit如何合并useState存储的cartItems订单数据

直接在 React Hook Form 的 handleSubmit 提交回调中合并表单收集的数据和外部的 cartItems 即可，该方案符合 React Hook Form 的设计逻辑，无额外性能开销，是绝大多数场景下的最优选择。

完整代码示例如下：

import { useForm } from 'react-hook-form';

type CheckoutProps = {
  emoneyPayment: boolean;
  setEmoneyPayment: (val: boolean) => void;
  cartItems: Array<{/* 你的购物车单项类型定义 */}>;
}

type Order = {
  // 你的表单字段类型定义，比如地址、联系人、电话等
  address: string;
  contactName: string;
  phone: string;
}

const Checkout = ({ emoneyPayment, setEmoneyPayment, cartItems }: CheckoutProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Order>();

  const onSubmit = (formValues: Order) => {
    // 仅在提交时做一次数据合并，得到完整的订单提交数据
    const finalSubmitData = {
      ...formValues,
      cartItems,
      // 还可按需附加其他额外字段，比如支付方式
      paymentType: emoneyPayment ? '电子货币' : '货到付款'
    };
    // 后续的打印、接口提交等逻辑直接使用finalSubmitData即可
    console.log(finalSubmitData);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段正常用register绑定即可，无需做任何修改 */}
      <div>
        <label>收货地址</label>
        <input {...register('address', { required: '请填写收货地址' })} />
        {errors.address && <span className="error">{errors.address.message}</span>}
      </div>
      {/* 其他表单字段省略 */}
      <button type="submit">提交订单</button>
    </form>
  )
}

方案优势 #

• 无需额外调用setValue等API修改表单内部状态，不会污染表单的原始用户输入数据
• 合并操作仅在提交时执行一次，无额外的重渲染开销
• 逻辑清晰易维护，表单状态只负责管理用户输入的动态字段，静态/外部附加字段统一在提交时处理
• 完全兼容TypeScript类型校验，只需定义好最终提交数据的类型即可保证类型安全

特殊场景说明：如果你的cartItems需要参与表单校验逻辑（比如要求购物车不为空才能提交），可以在useForm初始化时通过defaultValues传入cartItems，但只要没有表单校验关联的需求，提交时合并的方案永远是最优选择。

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