Question

在 setTimeout 函数中使用 this.setState 时出现“undefined 不是对象”错误

2021-01-15

852

javascript reactjs react-native

我正在使用 setTimeout 函数，该函数在使用 setState 的布尔状态之间交替循环运行。但是，当在函数中调用 this.setState 时，我收到以下错误：

TypeError: undefined is not an object (evaluating: 'this.state.percentages')

以下是我正在使用的代码片段 - 如果有人能指出我所犯的错误，我将不胜感激：

constructor(props) {
    super(props);
    this.state = {
      percentages: false,
    };
  }      

loopPercentages() {
    setTimeout(function() {
      this.setState({ percentages: !this.state.percentages });
        loopPercentages();
    }, 10000);
}
    
componentDidMount() {
  this.loopPercentages();
}

Answer 1

import React from "react";

export class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percentages: false
    };
  }

  loopPercentages = () => {
    setTimeout(() => {
      this.setState({ percentages: !this.state.percentages });
      this.loopPercentages();
    }, 10000);
  };

  componentDidMount() {
    this.loopPercentages();
  }

  render() {
    return (
      <div>
        <h1>Hello StackOverflow</h1>
      </div>
    );
  }
}

Answer 2

使用 setState 回调函数始终获取当前状态值：

loopPercentages() {
    setTimeout(() =>  { //--> this component scope
      this.setState((prev) => ({ percentages: !prev.percentages }));
      this.loopPercentages();
    }, 10000);
}