componentDidMountは、ReactJSのsetStateの後に呼び出されないようです。

Question

Learning ReactJS私は単純なカウントダウンアプリを開発中です。カウントダウンコンポーネントは次のようになります。

const Countdown = React.createClass({ 
    getInitialState: function() { 
    return { 
     remaining: 10, 
     running: true, 
    }; 
    }, 
    componentDidMount: function(){ 
    if (this.state.running) { 
     setInterval(this.tick, 1000); 
    } else { 
     console.log("already paused"); 
    }; 
    }, 
    tick: function(){ 
    if (this.state.remaining === 0) { 
     this.setState({ remaining: 10 }); 
     this.props.updateStats(); 
    } else { 
     this.setState({ remaining: this.state.remaining -1 }); 
    }; 

    }, 
    handlePauseClick: function(){ 
    this.setState({ running: false }); 
    }, 
    render: function(){ 
    const s = this.state.remaining; 
    return (
     <div className='ui centered card'> 
     <div className='content centered'> 
      <h1>{helpers.secondsToHuman(s)}</h1> 
      <ButtonControls 
      handlePauseClick={this.handlePauseClick} 
      /> 
     </div> 
     </div> 
    ) 
    }, 
}); 

カウントダウンが開始されます。一時停止ボタンをクリックすると停止するはずです。 componentDidMountは唯一の実行中のタイマーが真で実行されます。

if (this.state.running) { 
    setInterval(this.tick, 1000); 
} else { 
    console.log("already paused"); 
}; 

でクリックを処理した後：

this.setState({ running: false }); 

私は、コンポーネントが再レンダリングされると、そのcomponentDidMountが再び実行されることを期待していました。しかし、これは起こっていません。 componentDidMountは1回だけ実行されるようです。リアクトコンポーネントは、それがsetState後に呼び出されていない理由です、ツリーに装着した場合、あなたのアイデアを

おかげ

Answer 1

componentDidMountは、一度だけ実行されます。

componentDidUpdateが必要なので、このコールバックは最初のものを除くすべての再レンダリングで実行されます。最初のものはcomponentDidMountを使用します。

また、elseブロックの間隔をクリアしていないため、コンポーネントが再び再レンダリングされてもtick関数の実行が停止しません。最初のレンダリングプロセスが終了したとき

---

この

componentDidMount: function() { 
    this.tickInterval = setInterval(this.tick, 1000); 
}, 

componentDidUpdate: function() { 
    // if app is running and there is no tickInterval yet, set it 
    if (this.state.running && this.tickInterval === null) { 
    this.tickInterval = setInterval(this.tick, 1000); 
    // if app is stopped, but there is a tickInterval, clear it 
    } else if (!this.state.running && this.tickInterval !== null) { 
    clearInterval(this.tickInterval); 
    this.tickInterval = null; 
    } 
}, 

componentWillUnmount() { 
    clearInterval(this.tickInterval); 
} 

Answer 2

componentDidMountを試してみてくださいにのみ実行されます。あなたの仕事にはcomponentWillUpdateまたはcomponentDidUpdateを使うべきです。