Composition API变量响应性丢失，ranks_options无法追踪数组变化

你的核心问题是直接修改useForm的状态对象，导致状态变化无法被追踪，进而ranks_options无法同步更新。

问题根源 #

useForm的表单状态是受控的，你通过form.ranks.push()直接修改原数组的方式属于「状态突变（mutate）」，这种操作不会触发表单状态的更新机制，组件也不会重新渲染，所以ranks_options始终拿不到最新的ranks数组。

修正后的代码 #

import { useForm } from 'react-hook-form';

// 初始化表单，用defaultValues定义默认值
const { setValue, watch } = useForm({
  defaultValues: {
    name: null,
    ranks: [],
  },
});

// 用watch监听ranks字段的实时变化
const currentRanks = watch('ranks');

function addRanks() {
  // 创建新数组引用，通过setValue更新表单状态
  setValue('ranks', [...currentRanks, { name: null, id: null }]);
}

// 基于最新的ranks生成options
const ranks_options = currentRanks.map(value => value.name);

关键要点 #

• 禁止直接修改状态对象：必须使用useForm提供的setValue方法更新状态，这是触发状态更新和组件重渲染的唯一正确方式。
• 使用watch获取实时状态：watch方法会订阅指定字段的变化，确保你拿到的始终是最新的表单状态值。
• 保持数组引用不可变：更新数组时要创建新的数组（比如用扩展运算符[...currentRanks]），而不是修改原数组，这是React状态更新的核心原则，能确保状态变化被正确检测到。

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