react-hooks/exhaustive-deps的疑问？

Question

const [searchValue, setSearchValue] = useState({
    age: undefined,
    name: undefined,
  });
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 20,
  });
  const getList = useCallback(
    () => {
      setLoading(true);
      queryList({
        age: searchValue.age,
        name: searchValue.name,
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
      }).then().catch().finally(() => setLoading(false));
    },
    [pagination.current, pagination.pageSize, searchValue.age, searchValue.name],
  );

上面的代码，提示

React Hook useCallback has a missing dependency: 'pagination'. Either include it or remove the dependency array. Mutable values like 'pagination.current' aren't valid dependencies because mutating them doesn't re-render the component.eslintreact-hooks/exhaustive-deps

但是我的代码中使用了pagination.current和pagination.pageSize，而且依赖项中也显性的写了这两个值

为什么提示要依赖pagination？

怎么才能让他检测的更准确些呢？

Answer 1

翻了下源码，是因为你的属性名为current，换个名字就行了，比如pagination.pageNo

应该是考虑到开发者把ref放到deps里面的情况。

源码地址

=====以下为原答案===

提示里不是说的很清楚的了么

Mutable values like 'pagination.current' aren't valid dependencies because mutating them doesn't re-render the component.

如果你写了类似下面这种代码

pagination.current = 100

useCallback里的函数并不会得到更新。