如何在react-hook-form的useFieldArray中显示默认值？

1. 修正父组件默认值的核心错误 #

父组件中defaultValues的date字段被写成了字符串字面量，没有实际执行moment格式化方法，这是默认值不显示的核心原因；同时UpdatedBy使用固定字符串，应替换为实际用户名。

修改后的父组件代码：

// 先在顶部导入moment
import moment from 'moment';
// 父组件中获取当前登录用户名（和子组件逻辑一致）
const userName = useSelector((state) => state.users?.graphData?.displayName);

const {
  register,
  control,
  watch,
  handleSubmit,
  getValues,
  setValue,
  reset,
  errors,
} = useForm({
  defaultValues: {
    // 合并后端返回的已保存数据，若没有SummaryOfChanges则用默认值
    ...existingData,
    SummaryOfChanges: existingData?.SummaryOfChanges || [
      {
        message: 'message',
        date: moment().format('LL'), // 执行moment方法生成实际日期，而非字符串字面量
        UpdatedBy: userName || 'Unknown User', // 使用真实用户名
      },
    ],
  },
});

2. 确保编辑已有内容时默认值正确合并 #

从后端获取已保存数据后，判断数据中是否包含SummaryOfChanges字段：

• 若不存在：使用我们定义的默认数组初始化
• 若存在：保留后端返回的已保存内容，确保用户再次编辑时能看到之前添加的记录

3. 子组件代码优化 #

将moment的导入移至组件顶部，避免运行时动态require：

import moment from 'moment';
import { useSelector } from 'react-redux';
import { useFieldArray } from 'react-hook-form';
// 其他UI组件导入...

export const SummaryOfChanges = ({ control, register, watch }) => {
  const userName = useSelector((state) => state.users?.graphData?.displayName);

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'SummaryOfChanges',
  });

  // 其余渲染代码保持不变
};

4. 验证默认值初始化状态 #

如果仍未显示默认值，可在父组件中添加调试代码，确认默认值是否正确设置：

import { useEffect } from 'react';

useEffect(() => {
  console.log('SummaryOfChanges 当前值:', getValues('SummaryOfChanges'));
}, [getValues]);

若打印结果符合预期但仍不渲染，检查子组件useFieldArray的control是否与父组件传递的一致。

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