关于fileSearch多次调用的问题
来源：7-5 添加数据处理行为（二）
zozo_zuo
2019-09-12
老师，App.js中的fileSearch在收到onFileSearch的调用时，调用了很多次，每次试验时的次数还有一些变化。
分析原因是感觉是useKeyPress这里有些问题，当keyDownHandler被调用时setKeyPress(true);，如果一直按着不松手，那么就会
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in FileSearch (at App.js:86)
in div (at App.js:85)
in div (at App.js:84)
in div (at App.js:83)
in App (at src/index.js:7)
不确定fileSearch被多次调用是不是由于按键时间长短这个原因造成的？
2回答
-
同学你好 非常棒 你发现了一个 bug，我分析了一下，原因是这样的：
在 FileSearch 中，有这么一段 effect
useEffect(() => { if (enterPressed && inputActive) { onFileSearch(value) } if(escPressed && inputActive) { closeSearch() } })当我们按下 enter 的时候，onFileSearch 会被调用，这个时候外层 App 组件就会更新，这样FileSearch 也会被更新，所以这段 effect 又会被调用，这时候如果我们按住 enter 键不松手，那么 第一个条件又成立，onFileSearch 又被触发，这样就会多次触发这个 effect。
我的解决方案是，让这段 effect 可控，现在是无论什么时候都会触发，那么我们给它加一些条件，让他在特点的条件下再触发就好了。
useEffect(() => { if (enterPressed && inputActive) { onFileSearch(value) } if(escPressed && inputActive) { closeSearch() } }, [enterPressed, escPressed])只有在这两个值改变的时候再触发。这样就可以解决问题，其实应该其他的解决方案，同学可以自己想象欧。
132020-07-05 -
来到地球的第一天
2020-07-05
按老师的那种方法还是会提示缺少别的依赖，好像是这个依赖项要么就不写，要么就把涉及到的都写全，如果真是这样感觉挺扯淡的？？？
React Hook useEffect has missing dependencies: 'closeSearch', 'inputActive', 'onFileSearch', and 'value'. Either include them or remove the dependency array. If 'onFileSearch' changes too often, find the parent component that defines it and wrap that definition in useCallback
网上找了半天就找到一种很low的方法，把下一行代码的eslint检测关掉就好了，求老师给个更好的方法
00
相似问题