在ReactJS中将对象推入数组不会停止

Question

在我的React应用程序中，我需要执行一项任务，从数据库中检索音频URL，如下所示：

{
    "_id": {
        "$oid": "5a2b903abcf92a362080db4f"
    },
    "name": "test",
    "playList": [
        {
            "url": "https://p.scdn.co/mp3-preview/a3fd5f178b7eb68b9dba4da9711f05a714efc966?cid=ed36a056ee504173a3889b2e55cbd461",
            "artist": "Lil Pump",
            "songName": "D Rose",
            "_id": {
                "$oid": "5a2c5631e54ca10eb84a0053"
            }
        },
        {
            "url": "https://p.scdn.co/mp3-preview/155643656a12e570e4dda20a9a24d9da765b9ac5?cid=ed36a056ee504173a3889b2e55cbd461",
            "artist": "Tee Grizzley",
            "songName": "From The D To The A (feat. Lil Yachty)",
            "_id": {
                "$oid": "5a2c5631e54ca10eb84a0054"
            }
        }
    ],
    "__v": 0
}

使用从数据库解析的URL创建一个新的Audio（HTML5）对象，将其放入数组中，然后使用数组中的歌曲实现播放列表。

我从数据库中检索URL的方法如下：

- I made a search bar where I can search music tracks
- Clicking the item for search result adds the object to the DB shown above
- As the data is added to the DB, I try to parse that in my componentDidUdpdate.

所以我检索数据的代码如下：

（我在componentWillMount（用于加载现有数据）和componentDidMount（用于获取新添加的数据）中使用了两个相同的代码片段

componentWillMount() {

    console.log('Component WILL MOUNT!')

    axios.get('/channels').then( (res) => {
        //console.log(res.data.data.playList);
        //let playlists = [];
        res.data.data.playList.map((value, key) => this.playlists.push(new Audio(value.url)));

        this.setState((prevState) => {
            return { audioList: this.playlists, categories: res.data.data.playList }
        }, () => console.log(this.playlists));

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

}   

componentDidUpdate

componentDidUpdate(prevProps, prevState){

    console.log("did update")

    axios.get('/channels').then( (res) => {
        //console.log(res.data.data.playList);
        //let playlists = [];
        res.data.data.playList.map((value, key) => this.playlists.push(new Audio(value.url)));

        this.setState((prevState) => {
            return { audioList: this.playlists, categories: res.data.data.playList }
        }, () => console.log(this.playlists));

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

但是当我添加一个新的Audio对象时，它永远不会停止根据我的控制台日志添加对象，创建一个无限长度的列表。

我只想拥有数据库中的三个确切对象。

我该如何解决这个问题？

请帮忙！

修改

因此，当我点击搜索到的项目（歌曲JSON）时，它会解析艺术家姓名，曲目名称和歌曲URL，并使用以下代码将其添加到数据库中。

clickMusicHandler() {

    //console.log(this.props.channel);

    axios.put('/channels/'+'test', {

        playList: {
            songName: this.props.track.name,
            artist: this.props.track.artists[0].name,
            url: this.props.track.preview_url
        }
    })
        .then((res)=>{
        console.log("added song");
    }).catch((err)=>{
        console.log(err);
    });   

}

之后，我正在通过

更新添加的歌曲列表

<SidebarCategory categories={this.state.categories} />

SidebarCategory只是

render() {
    return (

            <div className="row">
                  <div className="col-sm-10">
                      {this.props.categories.map((category, key) =>(
                        <div key={key}><span>{category.songName}</span>
                         - <span>{category.artist}</span></div>
                      ))}
                  </div>
            </div>



    );
}

这只是可视化。我最终想要做的是使用我创建的Audio对象列表，通过使用songlist [index] .play（）和pause（）等命令制作可播放的歌曲列表。