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

Question

因此，我使用 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: songs.map is not a function

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

Answer 1

问题是，歌曲不是数组，所以它没有地图功能。 当你调用 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);
    })