将Audio对象添加到我的react状态数组

Question

componentWillMount() {

    console.log('Component WILL MOUNT!')

    axios.get('/channels').then( (res) => {
        console.log(res.data.data.playList);
        this.setState({
            categories: res.data.data.playList,
            audioList: res.data.data.playList.url
        })
    }).catch( (err) => {
        console.log(err);
    });


}   

在我的componentWillMount()中，我从数据库中获取了一堆mp3网址并存储到一个名为audioList的状态，因此它有一堆声音文件的URL。但是，我实际想要存储的是Audio对象（HTML5音频）。

通常，为了使其可玩，我必须创建一个新的Audio对象，如

this.audio = new Audio([URL]);

然后做

this.audio.play()

由于我想制作一份音乐列表，我希望除了

之外的所有内容

this.state.audioList = [ audioObject1, audioObject2, audioObject3, ... ]

我该怎么做？

修改

componentWillMount() {

    console.log('Component WILL MOUNT!')

    let playLists = [];

    axios.get('/channels').then( (res) => {
        //console.log(res.data.data.playList);
        res.data.data.playList.map((value, key) => playLists.push(new Audio(value.url)));
        this.setState((prevState) => {
            return { audioList: playLists}
        }, () => console.log("dddd" + this.state.audioList));

    }).catch( (err) => {
        console.log(err);
    });

}  

这给了我

EDIT2

componentWillMount() {

    console.log('Component WILL MOUNT!')


let playLists = [];

axios.get('/channels').then( (res) => {
    //console.log(res.data.data.playList);
    res.data.data.playList.map((value, key) => playLists.push(new Audio(value.url)));
    this.setState((prevState) => {
        return { audioList: playLists, categories: res.data.data.playList}
    });
}).catch( (err) => {
    console.log(err);
});

}   

Answer 1

对于数组中可用的对象，您可以尝试使用如下所示的数组push

let playlists = [];
res.data.data.playList.map((value, key) => playlists.push(new Audio(value.url)));
this.setState((prevState) => {
    return { audioList: playlists}
}, () => console.log(this.state.audioList));