关于useMemo引起的一个bug

1、前言

测试提了一个bug有一个删除按钮失效了，于是我启动项目在本地环境测试了一下，删除按钮确实不能用了，并且页面还报了异常。

如图，显示handleDelete不是一个函数，应该就是没找到handleDelete这个方法，我第一直觉可能是删除的变量名没拼对，或者是忘记写了导致没找到到这个函数。于是我打开代码翻找了一下。

2、bug定位

这个删除按钮是一个antd组件库中的table表格的操作项。

打开代码看了一下，函数名拼写都是正确的，点击也是可以正确跳转的，所以可以排除是名字拼错，或者是忘记写了。名字没拼错，怎么会找不到？然后我试着把handleDelete这个方法移到了操作项代码下面试了一下，页面就恢复正常了。难道是调用和方法离得太远导致点击删除按钮时，方法没有加载？我立马又排除了这个想法，出现删除按钮时，页面都应该加载完毕了，不存在还有函数没加载的情况。我又仔细的看了一下代码发现了这样一段代码。

这段代码就是在页面请求没有结束时，一直会显示loading的状态。我试了一下把删除方法写在这段代码前面，页面就正常，写在后面页面就报错。然后我就意识到应该就是点击删除按钮时，调用找到loading里面了。所以没有找到删除的方法。但是页面加载完毕，这里的loading理应是false，按理不会找到这里面。我继续往前看了一下，发现了问题的所在。

3、bug原因

首先简单介绍一下useMemo的作用。
useMemo它是用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，这样就不用在每次渲染的时候再做计算。简而言之，useMemo是用来缓存对象的。这里使用了useMemo对table列表项做了一个优化，对列表返回的对象做了缓存，避免页面在重新渲染时每次都需要重新定义这个对象。但是这里的useMemo导致列表在一开始加载的时候因为返回还是loading的状态所以没有找到删除的这个方法，缓存的对象里也就没有删除这个方法，等到页面结束loading的时候这个对象已经缓存完了，所以导致点击删除按钮的时候没有找到处理删除的方法。

4、bug解决

bug原因找到了，便就很好解决了。首先可以直接去掉useMemo这样就不会发生缓存问题了。当然也可以把删除方法提到最前面，这样每次缓存的时候都可以保证把删除方法缓存了。