ESLint：解决这个问题，将常量的初始化包装在它自己的 useMemo() 中

Question

我收到这个 eslint 警告：

ESLint: The 'variables' object makes the dependencies of useEffect Hook (at line 36) change on every render. To fix this, wrap the initialization of 'variables' in its own useMemo() Hook.(react-hooks/exhaustive-deps

对于以下代码：

const MyComponent = () => {
  // ...
  const variables = {
    orgID: org.id,
    projectIDs: projects.map(p => p.id)
  };
  const { data, error, loading } = myGraphqlQuery({ variables });

  useEffect(
    () => myOtherFunction(client, channel, query, variables),
    [variables, channel, client],
  );
  // ...
}

我不明白，我该怎么办？ const 使用 useMemo 有什么意义？

Answer 1

您应该使用 useMemo 包装变量的初始化。

const variables = useMemo(() => {
  return {
    orgID: org.id,
    projectIDs: projects.map(p => p.id)
  };
, [
// add the necessary dependencies here
]);

ESLint：解决这个问题，将常量的初始化包装在它自己的 useMemo() 中

ESLint: to fix this, wrap the initialization of constant in its own useMemo()

reactjs

eslint