Question

尝试遵循React中的简单时钟/倒计时教程：

constructor(props) {
    super(props);
    this.state = {
      secondsRemaining: 10
    };
  }

  componentDidMount(){
    let interval = setInterval(this.timer, 1000);
    this.setState({ secondsRemaining: this.state.secondsRemaining })
    this.setState({ interval: interval });
  };

  componentWillUnmount() {
    clearInterval(this.state.interval);
  };

  timer(){
    this.setState({ secondsRemaining: this.state.secondsRemaining -1 });
  };

一切都很明显但是当我运行它时，我在计时器功能中出现错误cannot read property secondsRemaining of undefined

这可能是我错过的愚蠢但我却看不到它

回答了这个问题的答案：setInterval in a React app

Answer 1

myfunction.bind()方法指定在调用方法时this将在方法内引用的内容。为了确保当你调用this.timer（）时，你实际上是在引用组件状态，而不是调用它的对象，你必须通过this.timer.bind(this)。

Answer 2

因为setInterval会调用this.timer，这将是window对象。你可以使用闭包：

componentDidMount(){
   let currentInstance = this;
   let interval = setInterval(function(){ currentInstance.timer(); }, 1000);
   ...
};

在执行方法componentDidMount的那一刻它具有初始化属性状态的上下文，保存到变量currentInstance中。然后我们将currentInstance的值关闭到setInterval的第一个参数。

Answer 3

将timer定义为Arrow Function。

  timer() => this.setState({ secondsRemaining: this.state.secondsRemaining -1 })

OR

.bind您在constructor内的方法：

constructor(props) {
    super(props);
    this.state = {
      secondsRemaining: 10
    };
    this.timer = this.timer.bind(this);
}

我不建议在this.timer.bind(this)内render;因为这样做，.bind将在每个渲染上创建一个新函数。

Answer 4

由于你的边界环境。您可以使用箭头函数或this.timer.bind（this）

为什么我的状态未定义？

4 个答案: