Question

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) => playlists.push(new Audio(value.url)));

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

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

}

**我也在componentDidUpdate（）**

中调用它

我在ReactJS网络应用程序中使用的上述代码，用于从我的数据库中检索数据，如下所示：

{
    "_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
}

我检索每首歌曲的网址并将其存储在我的状态this.state.audioList中以制作可播放的列表。

我使用索引

访问每首歌曲

所以，this.state.audioList[0]将成为第一首歌。

当我尝试播放

时播放此音乐

this.state.audioList[0].play()，这完全正常。

问题是我试图暂停它。

this.state.audioList[0].pause()由于某种原因不会暂停歌曲。

我假设这是因为this.state.audioList每次都会更新，我试图暂停的Audio对象是一个与当前正在播放的对象无关的新对象。

我是对的吗？如果是，那么这个问题是否有解决方案？

请帮忙！

Answer 1

这应该适用于componentWillMount，但首选componentDidMount，请参阅：https://reactjs.org/docs/react-component.html#componentdidmount

引自此链接（此处为远程端点axios网址）：

如果您需要从远程端点加载数据，这是实例化网络请求的好地方。

但是，如果您将axios.get()请求放在componentDidUpdate中，则几乎可以肯定这是行不通的，因为每次更新和重新呈现组件时都会调用此方法。

从React Component Lifecycle文档中，您会看到componentWillMount和componentDidMount都留在Mounting部分（也就是说，它们仅在组件中被调用一次DOM元素插入到DOM中，而componentDidUpdate位于Updating部分，因此每次更改组件的状态或道具时都会调用（当axios.get()承诺发生时会发生什么完成）。

此外，当map返回一个数组时，为什么不将其返回值分配给audioList？这是一个你可能想尝试的例子（虽然未经测试，抱歉！）：

componentDidMount() {

  console.log('Component DID MOUNT!')

  axios.get('/channels').then( (res) => {
    //console.log(res.data.data.playList);

    this.setState({
      audioList: res.data.data.playList.map(value => new Audio(value.url)),
      categories: res.data.data.playList
    });

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

}

希望这有帮助！

音频在ReactJS中没有暂停

1 个答案: