Question

代码：

setTimeout(() => {
                this.setState((state, props) => ({
                  activateLightColorForRed: true
                }), () => {
                  setTimeout(
                    this.setState((state, props) => ({
                      activateLightColorForRed: false
                    })), 3000);  
                });
                red.play()
              }, 3000);

当反应setstate没有回调它正在工作但我需要在3秒后将activateLightColorForYellow设置为false。如果我在setTimeout之外使用setstate，则setstate不起作用。帮助

Answer 1

setState的回调是为了确保状态真的发生了变化。
这是链式setTimout的一个小例子：

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "click me"
    };

    this.onClick = this.onClick.bind(this);
  }

  onClick(e) {
    this.setState({ title: "value 1" }, () => {
      setTimeout(() => {
        this.setState({ title: "value 2" }, ()=>{
          setTimeout(()=>{
            this.setState({title: 'value 3'})
          },1500);
        });
      }, 1000);
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.onClick}>{this.state.title}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

我相信你有语法错误。在第二个setTimeout上缺少箭头功能。

请试试这个;

{{1}}

setTimeout作为反应setState的回调？

2 个答案: