React Hook useCallback 有一個不必要的依賴：'GqlUserResponse'

Question

嘿，我在這段代碼中遇到錯誤

interface GqlUserResponse {
    data: {
      listUsers: {
        items: UserType[]
      }
    },
    errors?: any[]
  }

  useEffect(() => {
    onAuthUIStateChange((
      nextAuthState: any,
      authData: any,
    ) => {
      setAuthState(nextAuthState);
      if (authState !== AuthState.SignedOut) {
        console.log('authData', authData);
        setEmail(authData.attributes.email);
      }
    });
  },
  [authState]);

  const fetchUser = useCallback(async () => {
    try {
      const filter = {
        email: {
          eq: email, // filter priority = 1
        },
      };
      const result = await API.graphql(
        graphqlOperation(listUsers, { filter }),
      ) as GqlUserResponse;
      console.log('result', result?.data?.listUsers.items[0]);
      // setUser(result?.data?.listUsers?.items[0]);
    } catch (res) {
      // eslint-disable-next-line no-console
      console.error('error fetching userFiles', res);
    }
  }, [GqlUserResponse, email]);

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

錯誤：第 78:6 行：React Hook useCallback 有一個不必要的依賴項：'GqlUserResponse'。 排除它或刪除依賴數組。 像“GqlUserResponse”這樣的外部 scope 值不是有效的依賴項，因為改變它們不會重新渲染組件 react-hooks/exhaustive-deps 任何困難

Answer 1

錯誤消息非常清晰且很有幫助。 從GqlUserResponse的依賴數組中useCallback 。

依賴數組用於定義useCallback （或類似的useMemo ）何時停止使用其記憶值並重新初始化。 正如錯誤消息所述...改變外部 scope 值（在這種情況下是您的接口本身）不會導致重新渲染，因此它不屬於依賴項數組。