react-hook-form多步表单useFieldArray点击上一步字段丢失如何解决

问题根因 #

字段重置来源于两个逻辑缺陷：

1. Step2组件每次重新挂载时，useForm 均使用静态默认值初始化，未读取little state machine中已存储的历史表单数据
2. 点击「上一步」按钮时未触发数据持久化逻辑，仅在点击「下一步」时才会同步当前表单数据到localstorage，新增字段后未点下一步直接返回时，数据未完成存储

修复方案 #

按以下两步修改代码即可解决问题：

1. 调整useForm的默认值配置，优先读取全局存储的test数组，无历史数据时再加载默认值

const {
    register,
    control,
    handleSubmit,
    watch,
    formState: { errors },
} = useForm({
    defaultValues: {
        test: state.test || [{ nameOfDog: "Bill", ageOfDog: "2", sizeOfDog: "small" }],
    },
});

2. 修改「上一步」按钮的点击逻辑，点击时先提交当前表单数据到全局存储再跳转

<button className="prev" onClick={handleSubmit((data) => {
    actions.updateAction(data);
    navigate("/");
})}>
    Previous
</button>

可选优化 #

如果修改后仍存在字段异常注销的问题，可以将useFieldArray配置中的shouldUnregister改为false，避免动态字段被自动注销：

const { fields, append, remove } = useFieldArray({
    control,
    shouldUnregister: false,
    name: "test",
});

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