爲什麼我的可重用組件無法使用「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}在我的渲染方法沒有狀態。現在都好。