使用 useEffect 时，我在传递小于变量依赖项时收到警告

Question

在我的 React 应用程序中，我有一个 redux 存储，其中包含具有以下模型的弹出状态：

stateFilter: {
    visible: false
  }

在我的页面上，我得到了商店中弹出窗口的状态：

const mapStateToProps = ({ list }) => ({
  visible: list.stateFilter.visible
});

我想查询数据库以使用状态变量进行过滤。 而且我只想在弹出窗口关闭时运行我的操作中的功能。 为此，我利用了 useEffect 钩子：

  useEffect(() => {
    if (!visible) {
      search({
        start: min,
        end: max
      })
    }
  }, [visible])

我在名为“搜索”的 redux 操作中的操作。 而 'min', 'max' 是在操作弹窗时改变的状态变量。

当执行应用程序时，我收到如下警告：

React Hook useEffect has missing dependencies: 'max', 'min', and 'search'. Either include them or remove the dependency array. If 'search' changes too often, find the parent component that defines it and wrap that definition in useCallback

如果我传递了所有依赖项，则警告会关闭，但是当最小值、最大值发生变化时，我会看到我的 函数持续运行。

我尝试像这样使用 useCallback：

  const filter = useCallback(() => {
    search({
      start: min,
      end: max
    })
  })

  useEffect(() => {
    if (!visible) {
      filter();
    }
  }, [visible, filter])

然后我又收到这样的警告：

React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?

当警告出现时，表示某些东西没有优化，但我不知道处理这种情况的最佳方法是什么。

那么在这种情况下实现useEffect的正确方法是什么？

Answer 1

你必须添加依赖数组

const filter = useCallback(() => {
    search({
      start: min,
      end: max
    })
  }, [search, min, max])