Estou trabalhando em uma página React que possui um gerenciador de arquivos integrado. Tenho um DocumentTable.js
componente responsável por exibir a lista atual de arquivos disponíveis, e ele possui (entre outras) as três funções a seguir que se chamam entre si:
const getParamPath = useCallback((path, operation, currentFolderPath, fileName) => {
const paramPath = (
path +
"/?operation=" + operation +
((fileName === undefined) ? "" : ("&fileName=" + currentFolderPath + fileName))
)
return paramPath
},
[]
)
const getAllFiles = useCallback((path, currentFolderPath, fileName) => {
const setData = (fileData) => {
const newFolderPath = fileName === undefined ? currentFolderPath : (currentFolderPath + fileName + "/")
fileDataSetter(fileData)
folderPathSetter(newFolderPath)
}
dataGetter(getParamPath(path, "0", currentFolderPath, fileName), setData)
},
[dataGetter, getParamPath, fileDataSetter, folderPathSetter]
)
useEffect(() => {
getAllFiles(path, currentFolderPath)
},
[getAllFiles, path]
)
Começa com useEffect()
o carregamento com path
as currentFolderPath
variáveis e herdadas do componente pai. É uma das funções que chamam getAllFiles()
, que envia uma solicitação à API de backend para a lista de documentos disponíveis na pasta inicial. Ela usa várias funções também herdadas dos componentes pais ( dataGetter
, fileDataSetter
, folderPathSetter
) para fazer isso, e também chama a última das três, getParamPath()
, que é a que constrói a sequência de caminho com os parâmetros de consulta para a API de backend. Ela tem a variável fileName
when needed, mas também uma operation
variável que informará ao backend o que ele precisa fazer (0 - exibir tudo, 1 - baixar o arquivo, 2 - renomear o arquivo, 3 - excluir o arquivo, etc.).
Se o usuário clicar em um arquivo, ele será baixado para o computador. Se clicar em uma pasta, no entanto, a currentFolderPath
variável, que começa como uma string vazia, é atualizada para incluir o fileName
e um /
smybol, e a página é renderizada novamente com a lista de arquivos nessa pasta, graças ao useEffect.
Porém, tudo isso não é muito importante para o meu problema, que é tão simples quanto o compilador constantemente lançando avisos por causa das dependências useEffect, a saber:
O React Hook useEffect possui uma dependência ausente: 'currentFolderPath'. Inclua-a ou remova a matriz de dependências react-hooks/exhaustive-deps.
No entanto, o problema é que agora o programa está funcionando perfeitamente como esperado, se não fosse por esse aviso, enquanto que se eu remover a matriz de dependências, obviamente useEffect será chamado infinitamente assim que eu abrir a página, enquanto por outro lado, se eu incluir currentFolderPath
na matriz, o useEffect será constantemente renderizado na pasta inicial, eventualmente resultando em mais e mais erros de backend.
Minha pergunta seria: como posso limpar esse aviso sem comprometer a funcionalidade? Este é o primeiro aviso que recebo, que parece que deveria ser ignorado para sempre se eu quiser um programa funcional. Estou fazendo algo errado?
Cada aviso é configurado a partir das suas verificações de lint. Você só precisa encontrar a regra de lint que causa isso e desabilitá- la. A desativação também pode ser feita com base no escopo: para todo o projeto, para todo o arquivo ou para a próxima linha.
No seu caso adicione:
como: