Question

我一直试图让countDown（）函数在render（）函数中自动运行，但是似乎无法弄清楚。这是代码：

import React from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.countDown = this.countDown.bind(this);
    this.state = {
      count: 5,
      message: ''
    }
  }
  countDown() {
    setInterval(() => {
      if (this.state.count <= 0) {
        clearInterval(this);
        this.setState(() => {
          return {message: "Click here to skip this ad"}
        }) 
      } else {
        this.setState((prevState) => {
          return {count: prevState.count - 1}
        }) 
      }
    }, 1000)
  }  
  render() {
    return (
      <div>
        <h1 onLoad={this.countDown}>
          {this.state.message ? this.state.message : this.state.count}
        </h1>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));

我什至不确定这是否是最佳方法。我的目标是在屏幕上显示5秒倒计时，然后在倒数达到零时将其替换为下载消息/链接。

Answer 1

使用componentDidMount开始间隔，并在componentWillUnmount中将其清除（确定）。

然后正确使用this.setState

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 5,
      message: ''
    }
  }
  
  componentDidMount() {
    this.inter = setInterval(() => {
      if (this.state.count <= 0) {
        clearInterval(this.inter);
        this.setState({
          message: 'Click here to skip this ad'
        }); 
      } else {
        this.setState((prevState) => ({count: prevState.count - 1})); 
      }
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.inter);
  }
  
  render() {
    return (
      <div>
        <h1>
          {this.state.message ? this.state.message : this.state.count}
        </h1>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

我建议在countDown中调用componentDidMount，也建议存储interval并在componentWillUnmount中清除它。

Answer 3

就像您所知道的那样，倒数计时方法将无限期运行，就像SetIntervals一样。还要避免使用onLoads调用事件处理程序。您应该做的是利用React提供的组件生命周期方法。具体来说，ComponentDidMount()和ComponentDidUpdate()。

对于您的倒计时，请尝试使用类似的内容

class Clock extends React.Component {
    state = {
       counter: 10
    }

//immediately is triggered. This only happens once. And we have it immediately call our countdown
componentDidMount() {
    this.countDown()
}

countDown = () => {
    this.setState((prevState) => {
        return{
            counter: prevState.counter - 1
        }
    })
}

//will get called everyt time we update the component state
componentDidUpdate(){
    if(this.state.counter > 0){
        setTimeout(this.countDown, 1000) //calls the function that updates our component state, thus creating a loop effect
    }
}

render() {
    return (
        <div className="time">
            The time is: {this.state.counter}
        </div>
    );
}

}

如何使用ReactJS呈现倒数功能

3 个答案: