前言:
好久没写文章了,今天在写项目的时候,碰到了一个hooks的闭包问题,就很神奇,下面就来复现一下这个问题
问题复现:
先上代码
核心代码就这一些,页面上有一个按钮点击调用handleChangeStatus,如果值为2则重置为[{...}],如果是其它的则往columns数组里push一个item...
问题:
当我来回切换的时候,我的目标是在值为2的时候永远只有一个item,在为其它的时候只有两个item,但是事实却不是如此,每次切换完非2的值后,代码会一直往里push一个item,也就是[{},{},{},{}],每切换一次push一个item,就很神奇. 明明在为2的时候已经把columns重置为[{}],为什么后面push还是基于之前的columns.
问题解决:
以前对hooks的闭包仅仅只是局限在了setInterval了,没想到这样通过useState设置变量也会有产生闭包的问题. 要解决这个问题也简单,不再通过push的方式设置columns,而是直接手动重新配置...
总结:
这种解决方式很笨,也有了一点重复代码,不知道 有没有更好的方案
