React浏览器多图上传功能偶发失效、状态更新不触发重渲染问题

问题根因 #

React的状态更新采用浅比较逻辑，只有当状态的引用发生变化时才会触发组件重渲染。你当前的代码直接修改了原selectedFiles数组的内容，没有生成新的数组对象：

• const files = selectedFiles 只是将原数组的引用赋值给了files变量，没有创建新数组
• 调用push方法修改的还是原数组的内容，执行setSelectedFiles(files)时传入的还是原数组的引用
• React检测到引用没有变化，就会跳过本次重渲染，导致页面不更新，偶尔其他状态（比如name、description）更新时才会顺带把图片预览刷出来，就出现了有时生效有时失效的现象。

修复方案 #

把fileSelectedHandler改成如下写法，每次更新都生成新的数组：

const fileSelectedHandler = (event) => {
    if (!event.target.files?.[0]) return;
    const newFile = event.target.files[0];
    // 使用函数式更新，保证拿到的是最新的之前的文件列表
    setSelectedFiles(prevSelected => [...prevSelected, newFile]);
    setIsSelected(true);
    // 可选：清空input value，允许重复选择同一张图片触发onChange
    event.target.value = '';
}

额外优化建议 #

• 如果要支持同时选多张图片，可以给input标签加上multiple属性，然后遍历event.target.files把全部选中文件加入数组
• 调用URL.createObjectURL生成的预览地址会占用内存，记得在组件卸载或者文件删除时调用URL.revokeObjectURL释放资源，避免内存泄漏。

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