使用React Hook Form实现多图上传时删除预览后提交数据异常

问题原因 #

• 你在删除图片的deleteFile方法中，仅更新了本地自定义的image useState状态，没有同步更新React Hook Form（RHF）托管的images表单字段值
• RHF提交时会读取自身托管的表单字段值，而非你本地的image状态，因此提交的还是上传时写入的旧图片数组

修复方案 #

修改deleteFile方法，删除本地状态的同时，调用RHF提供的setValue方法同步更新images字段值：

function deleteFile(id) {
  const s = image.filter((item, index) => item.id !== id);
  setImage(s);
  // 新增该行，同步更新RHF托管的images字段
  setValue('images', s);
}

额外优化建议 #

你可以直接通过RHF的watch方法获取图片列表，不用单独维护一份冗余的useState状态，从根源避免状态不同步的问题：

// 替换原有的 const [image, setImage] = useState([]);
const image = watch('images', []);

// 上传逻辑中不需要再单独调用setImage，直接更新RHF字段即可
const newImage = await readFileAsync();
const newImageList = [newImage, ...image];
onChange(newImageList);

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