如何清除反应中的settimeout

时间:2018-04-11 20:25:04

标签: javascript reactjs settimeout cleartimeout

在每个问题组件上,我试图清除时间。所以在componentWillMount()我将启动计时器,然后在componentDidUpdate()我将清除超时。计时器似乎没有工作。计时器到期后,我会将用户推回主页。知道为什么使用clearTimeout()不起作用吗?

class Questions extends Component { 
    constructor(props){
        super(props);
        this.state ={
            error: false,
            position: null,
            redirect: false
        } 
        this.error = this.error.bind(this);   
        this.errorFalse = this.errorFalse.bind(this); 
        this.timer = this.timer.bind(this); 
    }
    timer=()=>{
        setTimeout(() => { 
            console.log('this ran') 
            this.setState({
                redirect: true
            })

    }, 5000)
    }
    componentWillMount(){
        this.setState({
            error: false
        })
        this.timer();

    }
    componentDidUpdate(prevProps, prevState, snapshot, timer){
        console.log('updated')
        clearTimeout(this.timer);
    }

2 个答案:

答案 0 :(得分:6)

当您使用setTimeout()时,它会返回timeoutID,您可以使用clear超时。

要在您的组件中使用它,您需要存储从timeoutID方法返回的timer

class Questions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      position: null,
      redirect: false
    }
    this.error = this.error.bind(this);
    this.errorFalse = this.errorFalse.bind(this);
    // this.timer = this.timer.bind(this); // don't bind an arrow function
  }
  timer = () => setTimeout(() => { // return the timeoutID
    console.log('this ran')
    this.setState({
      redirect: true
    })

  }, 5000);
  componentWillMount() {
    this.setState({
      error: false
    })
    this.timeoutID = this.timer(); // cache the timeoutID
  }
  componentDidUpdate(prevProps, prevState, snapshot, timer) {
    console.log('updated')
    clearTimeout(thiis.timeoutID); // clear the timeoutID
  }

答案 1 :(得分:2)

反应钩

var valid = items.Where(item => item.GetType().GetProperties()  // Get all properties
    .Where(p => new[]{"AddPower", "BaseCurve", "Power",
        "Axis", "ColorName", "Cylinder", "Diameter"}
        .Any(propName => propName == p.Name))          // Filter on names we care about
    .Any(p => p.GetValue(item) != null));              // Return true if any are not null