Início / user-28751094

user28751094's questions

Martin Hope
user28751094
Asked: 2025-04-04 18:17:09 +0800 CST
  • 5

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
Martin Hope
user28751094
Asked: 2025-02-27 18:40:20 +0800 CST
  • 5

Tenho uma div com nome de classe graph-containercom as seguintes propriedades:

.graph-container{
    width: 90%;
    height: 298px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

e nessa div, entre outras coisas, tenho outra div com a classe graph-selectorque contém uma lista de botões:

.graph-selector{
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 320px;
    margin-top: 46px;
    overflow-y: auto;
    overflow-x: hidden;
}

Dependendo do gráfico, ele pode ter alguns ou muitos botões, então eu configurei a propriedade de estouro vertical para adicionar uma barra de rolagem sempre que eles estendessem o tamanho do div do contêiner. No entanto, por algum motivo, isso apenas tornou os botões mais finos do que sua altura definida para poderem ser espremidos no div do contêiner sem que nenhuma barra de rolagem aparecesse, o que é... literalmente o oposto do que eu acabei de perguntar?

css