React Hook Form多步骤表单：复用组件默认值异常问题

问题核心原因 #

复用PersonForm时，React默认会复用组件实例，导致React Hook Form的表单状态没有和「收件人/寄件人」类型做隔离，出现状态串用、回退时数据丢失的问题。

具体解决步骤 #

1. 给复用的PersonForm添加唯一key

切换表单类型时，通过key强制React销毁重建组件，确保每个表单实例完全独立：

{currentStep === 'receiver' ? (
  <PersonForm key="receiver" formData={receiverData} onSave={saveReceiver} />
) : (
  <PersonForm key="sender" formData={senderData} onSave={saveSender} />
)}

这是最直接的隔离方式，避免组件复用导致的状态污染。

2. 在PersonForm内部独立创建表单实例

不要从父组件传递form实例，每个PersonForm自己初始化useForm，并在表单数据变化时重置状态：

// PersonForm.jsx
import { useForm, useEffect } from 'react-hook-form';

const PersonForm = ({ formData, onSave }) => {
  const { register, handleSubmit, reset } = useForm({
    defaultValues: formData || {}
  });

  // 每次表单数据更新时，重置表单到对应初始值
  useEffect(() => {
    reset(formData || {});
  }, [formData, reset]);

  const onSubmit = (data) => {
    onSave(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="姓名" />
      <input {...register('address')} placeholder="地址" />
      <button type="submit">保存</button>
    </form>
  );
};

3. 父组件维护独立的表单状态

分别保存收件人和寄件人的数据，不要共用同一个状态变量：

const MultiStepForm = () => {
  const [currentStep, setCurrentStep] = useState('receiver');
  const [receiverData, setReceiverData] = useState({});
  const [senderData, setSenderData] = useState({});

  const saveReceiver = (data) => {
    setReceiverData(data);
    setCurrentStep('sender');
  };

  const saveSender = (data) => {
    setSenderData(data);
    // 后续逻辑
  };

  const goBack = () => setCurrentStep('receiver');

  return (
    <div>
      {currentStep === 'receiver' ? (
        <PersonForm key="receiver" formData={receiverData} onSave={saveReceiver} />
      ) : (
        <>
          <PersonForm key="sender" formData={senderData} onSave={saveSender} />
          <button onClick={goBack}>返回收件人</button>
        </>
      )}
    </div>
  );
};

常见误区提醒 #

• 不要共用同一个form实例处理多个表单：React Hook Form的表单状态和组件实例绑定，复用组件时key不变会导致状态串用。
• defaultValues仅初始化生效：后续切换表单时必须用reset更新值，useMemo设置defaultValues无法触发表单状态更新。

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