使用反应将文件上传到firebase-firestore答案

【问题标题】：uploading files to firebase-firestore with react使用反应将文件上传到firebase-firestore
【发布时间】：2020-05-23 22:38:00
【问题描述】：

因此，我使用我的 react 应用程序设置了 Firebase，目前正在尝试解决其 Firestore 云数据库的问题。我想要做的是允许用户通过输入表单从他们的设备上传歌曲，然后将这些歌曲存储在云 Firestore 数据库中，然后将这些文件呈现在列表中，这就是代码。

import React, {useState, useEffect} from 'react';
import LoggedNav from './navLogged';
import db from '../firebase'

const SongListUI = () => {

    const [songs, setSongs] = useState([])
    const [oneSong, setSong] = useState('')
    const [Artist, setArtist] = useState('')
    const [src, setSrc] = useState('')


    const handleSubmit = (e) =>{
        e.preventDefault()

        let songbase = db.collection('Songs')
        let data = {oneSong, Artist, src}

        songbase
            .add(data);

        songbase.onSnapshot(snapshot =>{
            snapshot.docChanges().forEach(change =>{ 
                setSongs({title: change.doc.data().oneSong, aritst:change.doc.data().Artist, source: change.doc.data().src})
            })
        })
    }



    return ( 
        <div className="hi">

            <div>
                <LoggedNav />
            </div>
            <div>
                {
                    songs.map(song =>{
                        return(
                            <div key={song.id}>
                                <h4>{song.title}</h4>
                                <audio controls>
                                    <source src={song.source} type="audio/mpeg" />
                                </audio>
                                <h3>{song.artist}</h3>
                            </div>
                        )
                    })
                }
            </div>

            <div>
                <form onSubmit={handleSubmit}>
                    <label>addSong</label>
                    <input type="text" value={oneSong} onChange={(e) => setSong(e.target.value)}/>
                    <input type="text" value={Artist} onChange={(e) => setArtist(e.target.value)}/>
                    <input type="file" value={src} onChange={(e) => setSrc(e.target.value)}/>
                    <input type="submit" value="Add a Song"/>
                </form>
            </div>



        </div>
     );
}

export default SongListUI;

所以当我输入歌曲并提交时，我收到一条错误提示 TypeError: song.map is not a function

尽管歌曲实际上已上传到数据库！任何帮助解释这一点，我应该怎么做才能开始工作？谢谢。

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore react-hooks

【解决方案1】：

问题是，songs 不是数组，所以它没有 map 函数。当您调用 setSongs 时，您会使用一个对象作为参数来调用它。你应该用一个数组来调用它。像这样的：

    songbase.onSnapshot(snapshot =>{
        const songs = [];
        snapshot.docChanges().forEach(change =>{ 
            songs.push({title: change.doc.data().oneSong, aritst:change.doc.data().Artist, source: change.doc.data().src})
        })
        setSongs(songs);
    })

【讨论】：