在reactjs中设置timeinterval的问题

Question

我尝试每隔5秒在设置的时间间隔内调用一个函数，但在TypeError中抛出错误：this.intialState不是一个函数componentDidMount() {         this.intialState();         setInterval(this.changeSelection,5000);     }    changeSelection(){         this.intialState();     }  TypeError: this.intialState is not a function

Answer 1

this在函数中失去其上下文。您可以changeSelection在构造函数中进行绑定

constructor() {

  super();

  this.changeSelection = this.changeSelection.bind(this);

  setInterval(this.changeSelection, 500);

}

或使其成为粗箭头函数，因为这些函数没有自己的this上下文，并且会采用父函数的上下文

changeSelection = () => {

  // code here

}

Answer 2

更新了5秒倒计时，使用 class Clock extends Component

    import React, { Component } from 'react';

    class Clock extends Component {

      constructor(props){

        super(props);

        this.state = {currentCount: 10}

      }

      timer() {

        this.setState({

          currentCount: this.state.currentCount - 1

        })

        if(this.state.currentCount < 1) { 

          clearInterval(this.intervalId);

        }

      }

      componentDidMount() {

        this.intervalId = setInterval(this.timer.bind(this), 1000);

      }

      componentWillUnmount(){

        clearInterval(this.intervalId);

      }

      render() {

        return(

          <div>{this.state.currentCount}</div>

        );

      }

    }

   export default Clock;

Answer 3

的arrow函数表达式是语法上紧凑的替代常规的函数表达式，虽然没有其自己的绑定到this

componentDidMount() { 

  this.intialState(); 

  setInterval(this.changeSelection,5000); 

}

changeSelection = () => { 

  this.intialState(); 

}