Pesquisa de site

reactjs - ESLint não sugere assinantes necessários do useEffect (CRA + TS + ESLint + Prettier)


Quando tentei criar um hook personalizado, enfrentei alguns problemas. O ESLint não me sugeriu inscritos para o useEffect. (fetch não foi sugerido e eu o preenchi manualmente) Eu também tentei o eslint-plugin-react-hooks, mas ele também não funcionou.

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

Mesmo problema para useCallback

código completo do hook personalizado

import { useState, useEffect, useCallback } from "react";
import { server } from "./server";
interface State<TData> {
  data: TData | null;
}
export const useQuery = <TData = any>(query: string) => {
  const [state, setState] = useState<State<TData>>({
    data: null,
  });

  const fetch = useCallback(() => {
    const fetchApi = async () => {
      const { data } = await server.fetch<TData>({ query });
      setState({ data });
      console.log(`${data} loaded (useQuery hook)`);
    };
    fetchApi();
  }, [query]); // HERE

  useEffect(() => {
    fetch();
  }, [fetch]); // AND HERE

  return { ...state, refetch: fetch };
};

Configuração ESLint

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

dependências de desenvolvimento

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.5"
  }