将 Firebase 存储 getDownloadUrl 反应到链接答案

【问题标题】：React Firebase storage getDownloadUrl to a link将 Firebase 存储 getDownloadUrl 反应到链接
【发布时间】：2021-03-07 06:08:37
【问题描述】：

我正在尝试创建一个下载链接以从我的 Firebase 存储中获取 CSV 文件。在 Class 你可以看到我们正在使用一个函数将下载 URL 放在 de 链接中。

import React, { Component } from 'react'
import { storage, auth }  from '../../handlers/Firebase'
import { Link } from 'react-router-dom';

class Dashboard extends Component {

    constructor() {
        super();
        this.state = {
            userAuth : auth.currentUser
        }
        this.getDownloadUrl = this.getDownloadUrl.bind(this);
    }

    getDownloadUrl(){
        var storageRef = storage.ref('images/test.csv');
        storageRef.getDownloadURL().then(function(url) {
            // we get correct URL in the console, but when we click on the 'a' the page just refresh...
            console.log( "Got download url: ", url );
            var link_item = document.getElementById('download-link')
            link_item.setAttribute('href', url)
        });
    }

    render() {

        //This is the data for in the CSV file
        var csvData = 'Title 1;Title 2;Title 3\r\nTest 1;Test 2;Test 3';

        var file = new Blob([csvData], {
            encoding: "UTF-8",
            type: "text/csv;charset=UTF-8"
        });

        // Create a root reference
        var storageRef = storage.ref();

        // Create a reference to 'images/mountains.jpg'
        var Ref = storageRef.child('images/test.csv');

        Ref.put(file).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
        });

        return (
            <div className="dashboard-page">
                <div className="container">
                    <h2>Dashboard</h2>
                    <Link to={this.getDownloadUrl} id="download-link">Download file</Link>
                </div>
            </div>
        )

    }

}

export default Dashboard

我在链接中获得了文件的 URL。但是当我单击链接时，页面只是刷新并且没有下载任何内容。我做错了什么？

【问题讨论】：

标签： reactjs firebase csv firebase-storage

【解决方案1】：

我修好了。我将函数getDownloadUrl 放在了类的render() 中。我仍然不明白为什么我不能只在函数上返回以在 de 链接中加载 URL。但也许有人可以告诉我！

【讨论】：