Início / coding / Perguntas / 79555042
Accepted
user28751094
Asked: 2025-04-04 18:17:09 +0800 CST

Como passar variáveis ​​diferentes das Promises entre várias cadeias .then()?

  • 772

Depois de procurar respostas sobre como baixar arquivos com o Axios no React, implementei o seguinte código:

const [fileName, setFileName] = useState("")
const [extension, setExtension] = useState("")

const downloadFile = useCallback(async (path) => {

    Axios.get(
        `http://localhost:8080/api${path}`,
        { responseType: 'blob' })
        .then(res => {

            let headers = res.headers['content-disposition']

            let fileName = headers.split('filename=')[1].split('.')[0]
            let extension = headers.split('.')[1].split(';')[0]

            setFileName(fileName)
            setExtension(extension)

            return res.data
        })
        .then(blob => {

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')

            const fullFileName = fileName + "." + extension

            link.href = url
            link.download = fullFileName;
            document.body.appendChild(link)

            link.click()

            link.remove()
            URL.revokeObjectURL(url)
        })
        .catch(err => console.log(err))
},
    []
)

Eu estava procurando definir o nome do arquivo e a extensão em a useStateno primeiro .then()e então usá-lo para nomear o arquivo baixado com seu nome original. No entanto, eu vim a ver que ele simplesmente não executa os setters antes da próxima .then()chamada, então as variáveis fileName​​e extensionainda são strings vazias até então, e ele dá a ele um nome padrão por causa disso. Como eu poderia fazer com que ele passasse os valores corretos para a próxima função na cadeia?

reactjs

1 respostas

  1. Best Answer

    Callbacks são chamados com seu contexto desde quando são criados. Então:

    1. O widget é renderizado e downloadFileestá fileNamevazio
    2. Você chama downloadFileneste contexto
    3. No primeiro thenvocê altera o estado do widget - rerender
    4. O novo downloadFileretorno de chamada é criado com fileNamepreenchido, MAS o seu retorno de chamada antigo está em execução
    5. Seu retorno de chamada antigo é executado em segundo lugar thencom o contexto antigo.

    Solução fácil:

    Não armazene fileNameand extensionem estado de widget se não for necessário. Use variáveis ​​simples.

    const downloadFile = useCallback(async (path) => {
    let fileName;
    let extension;

    Axios.get(
        `http://localhost:8080/api${path}`,
        { responseType: 'blob' })
        .then(res => {

            let headers = res.headers['content-disposition']

            fileName = headers.split('filename=')[1].split('.')[0]
            extension = headers.split('.')[1].split(';')[0]

            return res.data
        })
        .then(blob => {

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')

            const fullFileName = fileName + "." + extension

            link.href = url
            link.download = fullFileName;
            document.body.appendChild(link)

            link.click()

            link.remove()
            URL.revokeObjectURL(url)
        })
        .catch(err => console.log(err))
},
    []
)
    • -1

relate perguntas