使用react-hook-form给表单赋值：编辑地址时点击按钮无法回填表单值

问题表现 #

点击地址编辑按钮后，react-hook-form实现的表单没有回填对应地址的选中值，效果如下：

现有编辑触发代码：

const editAddress = (i) => {
    const addressClicked = addressList[i];
    console.log(addressWatch());
    setAddressValue("name", addressClicked);
    setShowForm(true);
};

错误原因 #

你当前代码的核心问题是setAddressValue（推测为react-hook-form导出的setValue方法别名）的调用参数不符合要求：

• react-hook-form的setValue方法第一个参数为单个表单字段的名称，第二个参数为该字段的对应值
• 你现在将完整的地址对象addressClicked直接赋值给name单个字段，无法实现全表单字段的批量回填

修复方案 #

方案1：使用reset方法批量回填（编辑场景优先推荐） #

reset是react-hook-form专门用于重置/批量填充表单值的方法，直接传入完整的地址对象即可自动匹配对应字段完成赋值：

1. 先从useForm返回值中解构出reset方法：

const { register, handleSubmit, reset, watch: addressWatch } = useForm();

2. 修改编辑触发函数：

const editAddress = (i) => {
  const addressClicked = addressList[i];
  // 传入完整地址对象批量填充所有匹配的表单字段
  reset(addressClicked);
  setShowForm(true);
};

方案2：逐个字段调用setValue赋值 #

如果需要单独控制每个字段的赋值逻辑，可以分别给每个字段设置对应值：

const editAddress = (i) => {
  const addressClicked = addressList[i];
  // 以下字段名根据你的实际表单字段调整
  setAddressValue("name", addressClicked.name);
  setAddressValue("phone", addressClicked.phone);
  setAddressValue("province", addressClicked.province);
  setAddressValue("detail", addressClicked.detail);
  setShowForm(true);
};

特殊场景兼容 #

如果你的表单组件是在setShowForm(true)之后才挂载渲染的，需要等组件挂载完成后再执行赋值逻辑，增加useEffect监听即可：

// 存储当前选中的编辑地址
const [currentEditAddress, setCurrentEditAddress] = useState(null);

const editAddress = (i) => {
  setCurrentEditAddress(addressList[i]);
  setShowForm(true);
};

// 监听表单显示状态，挂载完成后赋值
useEffect(() => {
  if(showForm && currentEditAddress) {
    reset(currentEditAddress);
  }
}, [showForm, currentEditAddress, reset])

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