一首歌曲在反应音频播放器中结束后，我想播放下一首歌曲。我已经将所有歌曲链接都指向一个数组，但不确定如何实现一个函数

Question

组件的外观：

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { deleteSong, getSongs, updateSong } from '../../store/song';

import ReactAudioPlayer from 'react-audio-player';
import { useHistory } from 'react-router';
import SongForm from '../AddSongForm';
import EditSongForm from '../EditSongForm';
import SpecificSong from '../SpecificSong';
import './SongList.css'

const SongList = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getSongs());
    }, [dispatch]);

    const [addShowForm, setAddShowForm] = useState(false);
    const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState('')

    const history = useHistory()

    const songsObj = useSelector((state) => state.songState.entries);
    const songs = Object.values(songsObj)


    const allsonglinks = []
    songs.map(song => {
        allsonglinks.push(song.songLink)
    })
    const playnext = (links) => {
        let nowplaying = links[0]
        links.shift()
        return nowplaying
    }


    const user = useSelector((state) => state.session.user);
    const CurrentUserId = user?.id

    const remove = (e) => {
        dispatch(deleteSong(e.target.id));
    }


    const addFormCheck = (e) => {
        if (addShowForm) setAddShowForm(false)
        if (!addShowForm) setAddShowForm(true)
    }
    // const editFormCheck = (e) => {
    //     if (editShowForm) setEditShowForm(false)
    //     if (!editShowForm) setEditShowForm(true)
    // }


    return (
        <div>
            <h1 className='listtitle'>Hear what’s trending for free in the SoundFi community
            </h1>
            {/* <button onClick={addFormCheck}>add a song</button> */}
            {CurrentUserId &&
                <div className='hiddenmessage'>
                    <p className='addsongmessage'>Or upload your own
                        <SongForm setAddShowForm={setAddShowForm} />
                    </p>
                </div>
            }
            <ol className='songlist'>
                {songs.map(({ id, songName, songLink, userId, albumImage }) => (
                    <div className='singlesong'>
                        <SpecificSong id={id} songName={songName} songLink={songLink} userId={userId} albumImage={albumImage} />
                    </div>
                ))}
            </ol>
            <div>
                playall songs
                <ReactAudioPlayer
                    className='playallaudioplayer'
                    src={allsonglinks[0]}
                    controls
                    key={allsonglinks[0]}
                    onEnded={playnext(allsonglinks)}
                />
            </div>
        </div >
    );
};
export default SongList;

'playall songs' 是我正在尝试的工作，我基本上只想获取网站上的所有歌曲，并在歌曲结束后一首接一首地播放。我尝试编写一个函数 (playnext)，但它无法正常工作。我不确定我是否需要更多地关注状态或创建一个新组件。

Answer 1

我认为你应该可以通过保持当前播放歌曲的状态来实现这一点。

// After populating allsonglinks, initialise a state with 0th index of your allsongLink
const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState(allsonglinks[0]);

const playnext = (links) => {
        let nowplaying = links[0]
        links.shift()
        setCurrentlyPlayingSong(links[0]);
    }

// .... In your render, update the src to point to the currentPlayingSong 

return (
        <div>
            <h1 className='listtitle'>Hear what’s trending for free in the SoundFi community
            </h1>
            {/* <button onClick={addFormCheck}>add a song</button> */}
            {CurrentUserId &&
                <div className='hiddenmessage'>
                    <p className='addsongmessage'>Or upload your own
                        <SongForm setAddShowForm={setAddShowForm} />
                    </p>
                </div>
            }
            <ol className='songlist'>
                {songs.map(({ id, songName, songLink, userId, albumImage }) => (
                    <div className='singlesong'>
                        <SpecificSong id={id} songName={songName} songLink={songLink} userId={userId} albumImage={albumImage} />
                    </div>
                ))}
            </ol>
            <div>
                playall songs
                <ReactAudioPlayer
                    className='playallaudioplayer'
                    src={currentlyPlayingSong}
                    controls
                    key={currentlyPlayingSong}
                    onEnded={playnext(allsonglinks)}
                />
            </div>
        </div >
    );

一首歌曲在反应音频播放器中结束后，我想播放下一首歌曲。我已经将所有歌曲链接都指向一个数组，但不确定如何实现一个函数

After a song ends in react audio player I want to play the next song. I've gotten all the song links to an array but not sure how to implement a func

javascript

audio

state

reactjs

redux