如何从 Firebase 存储中读取文件并在 React 组件上显示内容？答案

【问题标题】：How to read a file from Firebase storage and display contents on React component?如何从 Firebase 存储中读取文件并在 React 组件上显示内容？
【发布时间】：2020-12-31 01:54:47
【问题描述】：

我在 firebase 存储中有一个文件，如何让我的应用从中读取内容，然后在我的类组件 div 中打印这些内容？现在我有了它，它只是在新选项卡中打开 firebase 文件。

class ScanResult extends Component {
    state = {
        isFinishedScanning: false
    }
    componentDidMount() {
        const storageRef = app.storage().ref();
        app.database().ref("imgScanStatus").on("value", snapshot => {
            snapshot.forEach(snap => {
                this.setState({ isFinishedScanning: snap.val() });
            });
            if (this.state.isFinishedScanning) {
                storageRef.child('scanFiles/scan.txt').getDownloadURL().then(function (url) {
                    window.open(url);//OPENS FIREBASE FILE IN NEW TAB
                });
            }
        });
    }
    render() {
        return (
            <div>
                <InnerTitleBar title="Scan Result" />
                <p>Processing image...</p>
                <img src={loading} />
                <div>DATA FROM SCAN.TXT</div>
            </div>
        );
    }
}

【问题讨论】：

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

documentation 显示了如何执行此操作。
getDownloadURL 为您提供了一个 URL，您必须查询该 URL 才能获取文件的内容，然后您可以将此内容按顺序放入组件的状态显示它。

【讨论】：