Shadcn FormField结合React Hook Form图片数组更新异常问题

问题描述 #

使用Cloudinary Widget上传图片到表单预览后提交数据库，但始终只能显示1张图片，图片数组始终仅含一个元素。两张图片均已成功上传至Cloudinary，但表单的images字段数组未实现追加更新，而是被新图片替换，控制台会两次打印不同图片的字段值。尝试用本地状态或提前更新的方式未解决，改用函数式更新后又报错“期望传入数组而非函数”，移除onChange中的函数则功能失效。

问题原因分析 #

1. 初始代码问题：
   初始代码直接使用field.value拼接数组，由于React Hook Form的field.value在闭包中可能是过时状态，第二次上传时仍引用第一次的初始值（空数组），导致每次操作都是[空数组 + 新图片]，最终数组始终只有最后一张图片。

// 错误：field.value为过时状态
onChange={(url) => field.onChange([...field.value, { url }])}

2. 尝试方案的问题：
   React Hook Form的field.onChange默认不接受函数作为参数，只有form.setValue支持函数式更新获取最新状态，因此直接给field.onChange传函数会触发类型错误。

正确解决方案 #

方案1：使用form.setValue实现函数式更新 #

利用form.setValue支持函数式更新的特性，传入函数获取最新数组状态，再执行追加或删除操作。

修改FormField部分代码：

<FormField
  control={form.control}
  name="images"
  render={({ field }) => {
    // 处理图片添加
    const handleImageChange = (url: string) => {
      form.setValue('images', (prev) => [...(prev || []), { url }])
    }

    // 处理图片删除
    const handleImageRemove = (url: string) => {
      form.setValue('images', (prev) => (prev || []).filter(image => image.url !== url))
    }

    return (
      <FormItem>
        <FormLabel>Images</FormLabel>
        <FormControl>
          <ImageUpload
            value={field.value.map(image => image.url)}
            disabled={loading}
            onChange={handleImageChange}
            onRemove={handleImageRemove}
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    )
  }}
/>

方案2：使用form.getValues获取最新值 #

若坚持使用field.onChange，可通过form.getValues('images')直接从表单存储中获取最新数组状态，避免闭包中的过时值问题。

<FormField
  control={form.control}
  name="images"
  render={({ field }) => {
    const handleImageChange = (url: string) => {
      const currentImages = form.getValues('images')
      field.onChange([...currentImages, { url }])
    }

    const handleImageRemove = (url: string) => {
      const currentImages = form.getValues('images')
      field.onChange(currentImages.filter(image => image.url !== url))
    }

    return (
      <FormItem>
        <FormLabel>Images</FormLabel>
        <FormControl>
          <ImageUpload
            value={field.value.map(image => image.url)}
            disabled={loading}
            onChange={handleImageChange}
            onRemove={handleImageRemove}
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    )
  }}
/>

方案说明 #

• form.setValue的函数式更新能确保获取最新表单状态，不会因闭包引用过时值；
• form.getValues直接从表单核心存储读取最新的images数组，规避field.value在闭包中的 stale 问题；
• 两种方案均可实现图片数组的正确追加与删除，确保多张图片能正确存储在表单字段中。

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