为什么我的可重用组件不能与“ setInterval”一起使用？

Question

这是我的<Loader />组件。 我正在这样做，所以我可以传递正在渲染的文本和速度作为道具。 该代码更有意义：

class Loader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: props.text
    }
  }
  componentDidMount () {
    const stopper = this.props.text + '...';
    this.interval = window.setInterval(function(){
      if (this.state.text === stopper) {
        this.setState(function () {
          return {
            text: this.props.text
          }
        })
      } else {
        this.setState(function (prevState) {
          return {
            text: prevState.text + '.'
          }
        })
      }
    }.bind(this), this.props.speed)
  }

  componentWillUnmount () {
    console.log('cleared interval')
    window.clearInterval(this.interval)
  }

当组件卸载时，我收到正在记录的消息。 我没有收到任何错误，并且我的组件无法正常工作。 仅当我希望动画具有三个点时才显示“正在加载”。

哦，这里是道具：

Loader.propTypes = {
  text: PropTypes.string.isRequired,
  speed: PropTypes.number.isRequired,
}

Loader.defaultProps = {
  text: 'Loading',
  speed: 300,
}

Answer 1

我将文本渲染为{this.props.text}未在我的render方法中声明。 现在一切都好。