React-hook-form 如何触发字段数组所有项的demandRatio字段校验

react-hook-form 的 trigger 方法天然支持传入字段名数组进行批量校验，你只需要基于 useFieldArray 返回的 fields 动态生成所有待校验的 demandRatio 字段路径即可，具体实现如下：

完整实现代码 #

const { trigger, control } = useFormContext<CampaignFormValues>()
const { append, remove, fields } = useFieldArray<CampaignFormValues, 'assortmentNeeds'>({
  name: 'assortmentNeeds',
})

// 监听整个 assortmentNeeds 数组的 demandRatio 变更
const assortmentNeedsList = useWatch({
  name: 'assortmentNeeds',
  control,
})

useEffect(() => {
  // 生成所有项的 demandRatio 字段路径数组
  const needValidateFields = fields.map((_, index) => 
    `assortmentNeeds.${index}.demandRatio` as const
  )
  // 触发批量校验
  trigger(needValidateFields)
// 仅在所有demandRatio的值或字段数组长度变化时触发校验
}, [trigger, fields, ...assortmentNeedsList.map(item => item?.demandRatio)])

注意事项 #

• 不要把整个 assortmentNeedsList 作为 useEffect 依赖，否则数组内其他字段（如productGroup、category）变更也会触发不必要的校验，仅提取 demandRatio 作为依赖即可实现精准触发
• fields 必须加入依赖项，保证新增/删除数组项后，生成的校验字段路径可以同步更新，不会出现漏校验或者校验不存在字段的问题
• 若担心校验触发过于频繁影响性能，可以给校验逻辑加防抖处理，设置200-300ms的延迟执行即可

内容的提问来源于stack exchange，提问作者Johannes Klauß