使用React Hook Form实现动态多步骤表单时如何避免数据累积

问题 #

我用React Hook Form实现一个动态多步骤表单，表单内容根据上一步的答案动态切换（通过Redux管理表单内容状态）。但提交时data参数会累积所有历史步骤的输入值，而我只需要当前步骤的输入数据。

示例代码：

const MultiPageDynamicForm = () => {
    const formMethods = useForm()
    const { handleSubmit } = formMethods
    const formContent = useSelector(state => state.formContent)
    const dispatch = useDispatch()

    const onSubmit = (data, event) => {
        event.preventDefault()

        // 提交当前步骤数据并获取下一步内容，存入Redux
        dispatch(submitForm(data))

        // 问题：data会累积之前所有步骤的输入值，即使那些输入已经不再显示
    }

    return (
        <FormProvider {...formMethods}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <GenericInput type={formContent.inputType} /> {/* 根据inputType渲染不同输入组件 */}
                <button type="submit">Next</button>
            </form>
        </FormProvider>
    )
}

比如三步表单的提交数据：

// 实际情况
{ name: 'Bob' } // 步骤1
{ name: 'Bob', email: 'bob@example.com' } // 步骤2
{ name: 'Bob', email: 'bob@example.com', dob: '01/02/2003' } // 步骤3

// 期望结果
{ name: 'Bob' } // 步骤1
{ email: 'bob@example.com' } // 步骤2
{ dob: '01/02/2003' } // 步骤3

我已经用Redux存储每一步的响应，不需要React Hook Form保留历史数据，请问如何让每次提交只包含当前步骤的输入值？

解决方案 #

方法1：提交后重置表单状态 #

利用React Hook Form的reset方法，在提交完成后清空整个表单状态，确保下一次提交时data仅包含当前步骤的新输入。

修改onSubmit函数（假设formContent包含当前步骤的字段名fieldName）：

const onSubmit = (data, event) => {
    event.preventDefault()
    // 仅提取当前步骤的字段数据
    const currentStepData = { [formContent.fieldName]: data[formContent.fieldName] }
    dispatch(submitForm(currentStepData))
    
    // 重置表单状态，清除历史输入
    formMethods.reset()
}

方法2：步骤切换时自动重置表单 #

通过useEffect监听表单内容（formContent）的变化，每次步骤切换时自动清空表单，保证当前步骤的输入是全新的。

添加监听逻辑：

import { useEffect } from 'react'

const MultiPageDynamicForm = () => {
    const formMethods = useForm()
    const { handleSubmit, reset } = formMethods
    const formContent = useSelector(state => state.formContent)
    const dispatch = useDispatch()

    // 表单内容切换时重置表单
    useEffect(() => {
        reset()
    }, [formContent, reset])

    const onSubmit = (data, event) => {
        event.preventDefault()
        const currentStepData = { [formContent.fieldName]: data[formContent.fieldName] }
        dispatch(submitForm(currentStepData))
    }

    // 其余代码不变
}

方法3：仅监听当前步骤字段 #

使用React Hook Form的watch方法只监听当前步骤的字段，提交时直接使用监听值，避免依赖整个表单的data对象。

示例代码：

const MultiPageDynamicForm = () => {
    const formMethods = useForm()
    const { handleSubmit, watch } = formMethods
    const formContent = useSelector(state => state.formContent)
    const dispatch = useDispatch()

    // 仅监听当前步骤的目标字段
    const currentFieldValue = watch(formContent.fieldName)

    const onSubmit = (_, event) => {
        event.preventDefault()
        // 构造当前步骤的提交数据
        const currentStepData = { [formContent.fieldName]: currentFieldValue }
        dispatch(submitForm(currentStepData))
        
        // 可选：重置表单清除当前输入
        formMethods.reset()
    }

    // 其余代码不变
}

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