关于fileSearch多次调用的问题

Question

老师，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被多次调用是不是由于按键时间长短这个原因造成的？

Answer 1

张轩 2019-09-12 10:01:23

同学你好 非常棒 你发现了一个 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])

只有在这两个值改变的时候再触发。这样就可以解决问题，其实应该其他的解决方案，同学可以自己想象欧。

• 提问者 zozo_zuo #1

  非常感谢！

• Bug制造专家 #2

  学习了~！

• 来到地球的第一天 #3

  老师，照你这样写还是有报错说缺少别的依赖项，
  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

Answer 2

来到地球的第一天 2020-07-05 21:26:04

按老师的那种方法还是会提示缺少别的依赖，好像是这个依赖项要么就不写，要么就把涉及到的都写全，如果真是这样感觉挺扯淡的？？？

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检测关掉就好了，求老师给个更好的方法