再利用可能なコンポーネントが「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) 
    } 

コンポーネントがマウントされているときに、私がログに記録しているメッセージが表示されます。エラーは発生せず、コンポーネントは期待どおりに動作しません。 3つの点を実行しているアニメーションが必要な場合は、「読み込み中」と表示されます。

ああ、ここは小道具です：

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

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

Answer 1

{this.props.text}が私のrenderメソッドでの状態ではないと私は私のテキストのレンダリングされました。すべて今良い。