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 Web应用程序中使用的上面的代码从数据库中检索数据，如下所示:
{
"_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对象是一个新对象，与当前正在播放的对象无关。我对吗？如果是这样，是否有解决此问题的方法？
请帮忙!
最佳答案
尽管首选componentWillMount，但这应该可以在componentDidMount中工作，请参阅:https://reactjs.org/docs/react-component.html#componentdidmount
从此链接引用(远程端点是您的axios URL):
但是您几乎可以肯定，如果将axios.get()请求放在componentDidUpdate中，则将无法正常工作，因为每次更新和重新呈现组件时都会调用此方法。
在React Component Lifecycle文档中，您将看到componentWillMount和componentDidMount都保留在Mounting节中(也就是说，当将组件DOM元素插入DOM时，它们仅被调用一次)，而componentDidUpdate在Updating节中，因此每当组件的状态或 Prop 更改时都会调用(当实现axios.get() promise 时会发生什么)。
另外，随着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);
});
}
希望这可以帮助!