React多文件上传setState覆盖问题及报错解决方案咨询

1. 用Recoil的函数式更新（最直接的解决办法） #

Recoil的状态更新器支持传入函数，这个函数会接收当前最新的状态值，基于这个最新值生成新数组即可，完全避开闭包导致的旧状态问题。

代码示例：

const [texts, setTexts] = useRecoilState(textsState);

const handleAdd = async (file) => {
  const fileText = await readFileAsText(file); // 替换成你实际读取文件的逻辑
  // 函数式更新，每次都拿最新的状态来拼接
  setTexts(prevTexts => [fileText, ...prevTexts]);
};

原理：每次onAdd触发时，prevTexts都是当前Recoil里的最新数组，不管调用多少次，都能把新的文件内容正确加进去，而且是创建新数组，符合Recoil不可变状态的要求。

2. 临时缓存后批量更新（适合想减少状态更新次数的场景） #

如果不想每传一个文件就更新一次状态，可以用useRef临时存文件内容，等所有文件的onAdd都触发完，再一次性更新Recoil状态。要是黑盒组件没提供批量完成的回调，加个防抖定时器就行。

代码示例：

const [texts, setTexts] = useRecoilState(textsState);
const tempTexts = useRef([]);

const handleAdd = async (file) => {
  const fileText = await readFileAsText(file);
  tempTexts.current.push(fileText);
  
  // 防抖：等100ms，确保所有文件的onAdd都执行完再更新
  clearTimeout(tempTexts.current.timeout);
  tempTexts.current.timeout = setTimeout(() => {
    setTexts(prev => [...tempTexts.current, ...prev]);
    tempTexts.current = []; // 清空缓存
  }, 100);
};

为啥之前的操作会踩坑？ #

• setTexts([fileText,...texts])：因为onAdd是逐个触发的，每次调用时texts都是组件上一次渲染时的旧值（闭包的锅），最后一次更新会把之前的都覆盖，自然只剩最后一个文件内容。
• texts.push(fileText)：Recoil的状态是不可变且被冻结的，直接修改原数组会触发不可扩展的错误，必须通过setTexts生成新数组来更新状态。

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