在循环中只set一次

for (const e of files) { console.log(e) setFileList([...fileList, { file: e }])这里为啥只会set一次

1. 闭包问题

在这段代码中,很可能是因为闭包的原因导致了意外的行为。当你在循环内部使用 setFileList 时,回调函数(也就是 setFileList 内部执行的更新状态的逻辑)会形成闭包,并且它会捕获循环中的变量。

这里的关键问题是,setFileList 中的回调函数会在之后的某个时间点执行(具体取决于 React 的更新机制和调度),而不是立即执行。在这个延迟执行的过程中,循环已经结束,此时 e 的值是循环结束后的最后一个值。

例如,如果 files 是一个包含三个文件的数组,循环会快速执行三次,每次都创建一个新的闭包,但是每个闭包都捕获了同一个 e 变量的引用。当这些闭包最终被执行来更新状态时,它们都使用了循环结束后的 e 的最终值,所以看起来好像只更新了一次状态,实际上是多次更新但每次更新的值都是一样的。

2. 解决办法

为了解决这个问题,你需要确保在每个闭包中都能正确捕获到循环迭代时的当前值,而不是循环结束后的最终值。以下是几种常见的解决方法:

方法一:使用函数参数传递当前值

可以通过在循环内部定义一个立即执行函数,并将当前迭代的值作为参数传递给这个函数,这样就能在闭包中正确捕获到每次迭代的具体值。

复制代码
for (const e of files) {
    (function (currentE) {
        console.log(currentE);
        setFileList([...fileList, { file: currentE }]);
    })(e);
}

在这个例子中,我们定义了一个立即执行函数,并将当前迭代的 e 值作为参数 currentE 传递进去。这样,在闭包内部(也就是立即执行函数内部),就可以正确使用每次迭代的具体值来更新状态,而不会受到循环结束后 e 值变化的影响。

方法二:使用 map 函数代替 for...of 循环
map 函数会返回一个新的数组,其中每个元素都是对原数组对应元素进行某种操作后的结果。在这个过程中,它会自动处理闭包问题,确保每个回调函数都能正确捕获到当前迭代的值。

复制代码
const newFiles = files.map((e) => {
    console.log(e);
    return { file: e };
});
setFileList([...fileList,...newFiles]);

在这里,我们首先使用 map 函数遍历 files 数组,对于每个元素 e,我们打印它并返回一个包含该文件的新对象。然后,我们将通过 map 函数生成的新数组 newFiles 合并到原有的 fileList 状态中,这样就能正确地将每个文件添加到 fileList 中,而不会出现只更新一次的问题。

无论是哪种方法,都能有效地解决因为闭包导致的在循环中设置状态时出现的意外行为问题,确保状态能够按照预期进行更新。

相关推荐
万少5 分钟前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.23 分钟前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者31 分钟前
web 网页数据传输处理过程
前端
非凡ghost32 分钟前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
w2sfot41 分钟前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴1 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
郝学胜-神的一滴1 小时前
避免使用非const全局变量:C++中的最佳实践 (C++ Core Guidelines)
开发语言·c++·程序人生
吃饭最爱1 小时前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人1 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
搞一搞汽车电子1 小时前
S32K3平台eMIOS 应用说明
开发语言·驱动开发·笔记·单片机·嵌入式硬件·汽车