Início / user-30266210

user30266210's questions

Martin Hope
user30266210
Asked: 2025-04-28 16:06:42 +0800 CST
  • 6

Eu tenho um componente DialogueWindow geral:

function DialogueWindow({elements}) {

  return (

    <div className="backdrop">

      <dialog className="dialogue-window">

        {elements}

      </dialog>

    </div>
  )
}

export default DialogueWindow

Ele exibe dentro dele todos os elementos aos quais é passado. Atualmente, estou passando um elemento FileUploader, que tem um botão de cancelar para o usuário fechar a caixa de diálogo.

Em App.js:

<DialogueWindow
     elements={
        <FileUploader/>
     }
/>

No FileUploader:

function FileUploader() {

  ...

  return (

    <div className="file-uploader">

        ...

        <div className="file-uploader-button-container">

            <button>
                Upload
            </button>

            <button>
                Cancel
            </button>

        </div>

    </div>
  )
}

export default FileUploader

Percebi que em JavaScript padrão você chama document.getElementById() para buscar o elemento de diálogo e, em seguida, chama o método close() nele. Mas como isso funciona em React?

javascript
Martin Hope
user30266210
Asked: 2025-04-14 18:24:21 +0800 CST
  • 4

Estou trabalhando em uma página React que possui um gerenciador de arquivos integrado. Tenho um DocumentTable.jscomponente 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 pathas currentFolderPathvariá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 fileNamewhen needed, mas também uma operationvariá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 currentFolderPathvariável, que começa como uma string vazia, é atualizada para incluir o fileNamee 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 currentFolderPathna 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?

reactjs