React Hook Form中useFieldArray字段与表单状态不同步问题求助

使用React Hook Form开发时，添加Todo并输入描述后点击完成按钮，MileStonesActionTodoView组件内useFieldArray的fields数组中，todo的描述值无法与useForm的更新状态同步。尝试使用useWatch可以解决，但会破坏React Hook Form的性能优化，希望得到不影响性能的修复方案。

useFieldArray返回的fields是表单状态的不可变快照，仅在调用insert/remove/update等fieldArray操作时才会更新。而表单字段的输入变更（如textarea输入）只会更新React Hook Form的内部表单状态，不会触发fields的重新生成——这是React Hook Form的性能优化设计，避免不必要的重渲染。因此切换到普通视图时，fields里的todo对象还是旧的快照值，导致显示不同步。

不需要使用useWatch，直接在需要显示最新值的地方，通过getValues获取对应字段的实时值即可。这种方式仅在渲染时按需获取，不会触发额外的重渲染，能保持React Hook Form的性能优势。

修改步骤 #

1. 在子组件MileStonesActionTodoView中，从useFormContext获取getValues方法；
2. 在getTodoNormalView函数中，替换原本直接使用的todo.description，改为通过getValues获取该字段的最新值。

import React from 'react'
import "./MileStonesActionTodoView.css";
import { useFieldArray, useFormContext } from 'react-hook-form';
import { MileStonesFormData, TodoFormData } from '../MileStonesActionView';
import ADD_ICON from "src/assets/images/add-icon.svg";
import DELETE_ICON from "src/assets/images/delete-icon.svg";
import DONE_ICON from "src/assets/images/done-icon.svg";
import { ActiveLearningPathDetails } from 'src/types';
import { UUIDUtils } from 'src/utils/UUIDUtils';

export interface MileStonesActionTodoViewProps {
    milestonesIndex: number;
    activeLearningPath: ActiveLearningPathDetails;
}

export const MileStonesActionTodoView: React.FC<MileStonesActionTodoViewProps> = React.memo(({ milestonesIndex, activeLearningPath}) => {
    
    const { control, register, getValues } = useFormContext<MileStonesFormData>(); // 新增getValues

    const { fields, remove, insert } = useFieldArray({
        control,
        name: `milestones.${milestonesIndex}.todos`
    });

    const [editModeIds, setEditModeIds] = React.useState<string[]>([]);

    const addTodoItem = (milestoneIndex: number, todoIndex: number) => {
        const todoId = UUIDUtils.getUUIDWithoutDashes();
        insert(todoIndex, {
            assignee: activeLearningPath.mentee_id,
            description: '',
            is_completed: false,
            todo_id: todoId,
        });
        return todoId;
    }

    const removeTodoItem = (milestoneIndex: number, todoIndex: number) => {
       remove(todoIndex);
    }

    const getTodoNormalView = (todo: TodoFormData, milestoneIndex: number, index: number) => {
        // 获取该todo描述的最新值
        const latestDescription = getValues(`milestones.${milestoneIndex}.todos.${index}.description`);
        return (
            <div className="d-flex flex-row align-items-center justify-content-between milestone-todo-action-item">
                <span className="milestone-todo-action-desc">{latestDescription}</span> {/* 使用最新值 */}
                <div className="milestone-todo-actions">
                    <img src={DELETE_ICON} className="curs-ptr" alt="" onClick={() => {
                        removeTodoItem(milestoneIndex, index);
                        setEditModeIds(prev => prev.filter(item=> item != todo.todo_id));
                    }} />
                    <img src={ADD_ICON} className="curs-ptr" alt="" onClick={() => {
                        const todoId = addTodoItem(milestoneIndex, index);
                        setEditModeIds(prev => [...prev, todoId]);
                    }} />
                </div>
            </div>
        )
    }

    const getTodoEditView = (todo: TodoFormData, milestoneIndex: number, index: number) => {
        return <div className="milestone-input-section milestone-todo-edit-view">
            <textarea
                className=" milestone-form-input milestone-todo-desc-input"
                placeholder="Achievement Description"
                rows={5}
                {...register(`milestones.${milestoneIndex}.todos.${index}.description`, {
                    required:'Achievement description is required'
                })}
            />
            <img src={DONE_ICON} className='milestone-todo-desc-save-icon curs-ptr' alt="" onClick={() => {
                    setEditModeIds(prev => prev.filter(item=> item != todo.todo_id));
                }} />
        </div>
    }
    
    return (
        <div className="milestone-expected-achievements">
            <div className="d-flex flex-row justify-content-between align-items-center">
                <span className="milestone-expected-achievements-title">Expected Achievements</span>
                <img src={ADD_ICON} className="curs-ptr" alt="" onClick={() => {
                    const todoId = addTodoItem(milestonesIndex, 0);
                    setEditModeIds(prev => [...prev, todoId]);
                }} />
            </div>
            {
                fields.map((item, todoIndex) => (
                    <div key={item.todo_id}>
                        {editModeIds.includes(item.todo_id) 
                            ? getTodoEditView(item, milestonesIndex, todoIndex) 
                            : getTodoNormalView(item, milestonesIndex, todoIndex)}
                    </div>
                ))
            }
        </div>
    )
});

• 若担心getValues在渲染时频繁调用，可配合useMemo缓存结果，但由于getValues是轻量操作，且仅在组件渲染时执行，多数场景下无需额外缓存；
• 保持React.memo包裹子组件，确保只有当milestonesIndex或activeLearningPath变化时才重渲染，维持性能优势。

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