react-hook-form useFieldArray接口数据加载后不渲染问题求助

核心问题 #

你在useForm配置中错误地使用了不存在的values参数来初始化表单数据，这导致useFieldArray无法正确感知breakTime数组的初始值，只有在触发append操作时才会重新同步表单状态。

修复步骤 #

1. 移除无效的values配置
   react-hook-form 没有values这个初始化参数，正确的表单数据初始化方式是通过defaultValues（同步场景）或reset方法（异步场景，比如API数据返回后）。

2. 异步数据处理用reset更新表单
   如果data是从API异步获取的，在数据返回后调用form.reset(data)来同步完整表单数据，包括breakTime数组。

3. 确保默认值结构一致
   保证initializeDefaultValues()返回的breakTime是一个空数组，和API返回的数组结构匹配。

修改后的代码示例 #

表单初始化部分

const form = useForm<OperatorOrManageData>({
    resolver: zodResolver(operatorOrManagerSchema),
    defaultValues: initializeDefaultValues(), // 这里初始化默认空值，breakTime设为[]
    mode: "all",
})

// 异步获取数据后重置表单
useEffect(() => {
    if (data) {
        form.reset(data);
    }
}, [data, form])

const { fields, append, remove } = useFieldArray({
    name: "breakTime",
    control: form.control,
})

默认值初始化函数示例

function initializeDefaultValues(): OperatorOrManageData {
    return {
        // 其他表单字段默认值...
        breakTime: [], // 必须是数组类型，与API返回结构一致
    }
}

原理说明 #

useFieldArray依赖react-hook-form内部的表单状态来同步字段列表，只有通过官方支持的defaultValues或reset方法更新表单数据，才能让useFieldArray实时感知到breakTime数组的变化，从而自动渲染对应的输入框，无需手动触发append操作。

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