загрузка файлов в firebase-firestore с помощью реакции - PullRequest
Новая
       12

загрузка файлов в firebase-firestore с помощью реакции

0 голосов
/ 07 февраля 2020

Итак, я настроил 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 не является функцией

, несмотря на то, что песни действительно загружаются в базу данных! , Любая помощь, объясняющая это, что я должен сделать, чтобы начать работать? Спасибо.

1 Ответ

0 голосов
/ 07 февраля 2020

Проблема в том, что песни не являются массивом, поэтому у них нет функции отображения. Когда вы вызываете 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);
    })
...