Question

我尝试将状态播放方式从false更改为true，还尝试添加ComponentDidMount，ComponentDidUpdate，ComponentWillMount，但没有任何效果。有时我一直出错。

当单击播放和暂停按钮时，它可以正常工作，但我希望它在有人访问网站2秒后自动播放。

我的代码：

import React from "react";
class Music extends React.Component {
  constructor(props) {
    super(props);
    this.state = { play: false };
    this.url = "http://streaming.tdiradio.com:8000/house.mp3";
    this.audio = new Audio(this.url);
    this.togglePlay = this.togglePlay.bind(this);
  }
  //   componentDidMount = () => {
  //     this.togglePlay();
  //   };
  componentDidMount = () => {
    setTimeout(this.setState(this.togglePlay()), 500);
  };
  togglePlay() {
    this.setState({ play: !this.state.play });
    console.log(this.audio);
    this.state.play ? this.audio.play() : this.audio.pause();
  }
  render() {
    return (
      <div>
        <button onClick={this.togglePlay}>
          {this.state.play ? "Pause" : "Play"}
          {/* {this.state.play ? "Play" : "Pause"} */}
        </button>
      </div>
    );
  }
}
export default Music;

错误：

index.js:1582 Uncaught Error: The error you provided does not contain a stack trace.


   at B (index.js:1582)
    at G (index.js:1899)
    at index.js:1914
    at index.js:1933
    at index.js:1414
B @ index.js:1582
G @ index.js:1899
(anonymous) @ index.js:1914
(anonymous) @ index.js:1933
(anonymous) @ index.js:1414
music.js:22 Uncaught (in promise) DOMException
togglePlay @ music.js:22
Music._this.componentDidMount @ music.js:16
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:16
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ routes.js:17
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

Answer 1

而不是像这样调用超时功能：

setTimeout(this.setState(this.togglePlay()), 500);

为什么不像以下那样调用togglePlay函数：

setTimeout(this.togglePlay(), 500);

这就是为什么您也遇到错误的原因。

Answer 2

setState方法只能用于设置组件的状态。如果您想了解更多信息，请查看setState的文档。

如果您想稍后再触发togglePlay函数，只需将方法togglePlay传递到setTimeout，延迟时间为ms。

例如：

// this.setState({ play: !this.state.play });
setTimeout(this.togglePlay, 500);

Answer 3

这可能有点麻烦，但是setTimeout接受功能和一个数字。您传递给它的基本上是void和500。Lemme可以更好地解释一下：

function test() {
    return true;
}

setTimeout(test(), 500);

这可能会引发错误，因为我正在调用函数，而不是传递函数。因此，实际上，我正在向true函数传递setTimeout和500。

您可以尝试以下操作：

componentDidMount = () => {
    setTimeout(() => this.togglePlay(), 500);
    // Or setTimeout(this.togglePlay, 500); if you get what I'm trying to say
};

延迟后自动在网站上播放音频

3 个答案: