useEffect钩子中Files数组值变更异常问题排查

问题原因 #

1. 控制台延迟求值误导：你在filter前后打印的files是对象引用，浏览器控制台会在你展开对象时才读取最新属性。这意味着你看到的error字段是后续代码添加的，而filter执行时对应文件对象还没有这个属性。
2. 状态更新违反不可变性：如果给文件加error时是直接修改原对象（比如file.error = 'xxx'），没有生成新的数组/对象引用，React会认为files状态没变化，导致useEffect拿到的是旧的数组快照，此时对象还没被加上error。

解决办法 #

• 严格遵循React状态不可变性：更新文件状态时，必须创建新的对象和数组，让React能检测到变化：

// 错误示例（直接修改原对象）
files[targetIndex].error = 'technicalError';
setFiles(files);

// 正确示例（生成新引用）
const updatedFiles = files.map((file, idx) => 
  idx === targetIndex ? {...file, error: 'technicalError'} : file
);
setFiles(updatedFiles);

• 打印真实的即时状态：把files转成JSON字符串打印，就能看到filter执行时的真实数据，避免控制台延迟求值的干扰：

console.log("FilesArray before filter (真实状态) =>", JSON.stringify(files));

• 确认useEffect依赖的正确性：确保files是用useState管理的状态，且每次更新都生成新数组引用，这样useEffect才能在状态真正更新时触发，拿到最新的文件数据。

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