Question

我尝试每隔5秒钟在设置的时间间隔内调用一个函数，但是在 TypeError：this.intialState不是函数

componentDidMount() { 
        this.intialState(); 
        setInterval(this.changeSelection,5000); 
    }
    changeSelection(){ 
        this.intialState(); 
    }

  TypeError: this.intialState is not a function

Answer 1

使用class Clock extends Component

更新了5秒倒计时

    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 2

arrow函数表达式在语法上是常规函数表达式的紧凑选择，尽管没有自己绑定到this

componentDidMount() { 
  this.intialState(); 
  setInterval(this.changeSelection,5000); 
}
changeSelection = () => { 
  this.intialState(); 
}

Answer 3

this在函数中丢失了上下文。您可以在构造函数中绑定changeSelection

constructor() {
  super();
  this.changeSelection = this.changeSelection.bind(this);
  setInterval(this.changeSelection, 500);
}

或将其设置为粗箭头功能，因为这些函数没有自己的this上下文，并且将采用父级的

changeSelection = () => {
  // code here
}

Answer 4

问题是您的函数'changeSelection'无法访问'this'。

有两种简单的方法可以解决此问题：

在您的“构造函数”中，添加此行以将“ this”与changeSelection绑定

this.changeSelection = this.changeSelection.bind()

箭头功能

changeSelection = () => {};

Click here to see more ways to do binding

您可以阅读有关为什么我们需要绑定why and how to bind

的更多信息

reactjs中设置时间间隔的问题

4 个答案: