警告：setState（...）：マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます。タイマー付き

Question

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Clock component. 

なぜこのエラーは表示され続けますか？私のアプリケーションからログアウトすると、この警告がコンソールに表示され始めます。誰がなぜそれが起こるのか説明できますか？

const Clock = React.createClass({ 

    getInitialState() { 
     return { 
      currentTime: moment.utc().format(formatter) 
     }; 
    }, 

    componentDidMount: function() { 
     const tickId = setInterval(this.tick, 1000); 
     this.setState({tickId: tickId}); 
    }, 

    componentWillUnmount: function() { 
     clearInterval(this.state.tickId); 
    }, 

    tick: function() { 
     this.setState({ 
      currentTime: moment.utc().format(formatter) 
     }); 
    }, 

    render() { 
     return <span>{this.state.currentTime}</span>; 
    } 
}); 

Answer 1

私は前に同様の問題に遭遇しました。私の場合は何が起こっていたのですか、区間を正しく取り消していましたが、既に関数を呼び出した後で取り消すこともあります。私は、コンポーネントがまだマウントされているかどうかを知る方法が必要でした。残念なことに、Reactはコンポーネントがマウントされた状態を公開しません（少なくとも簡単には）。そこで、マウントされた状態を自分自身で追跡し、インターバル機能を呼び出すときにコンポーネントがまだマウントされているかどうかを確認しました。

const Clock = React.createClass({ 

    getInitialState() { 
     return { 
      currentTime: moment.utc().format(formatter) 
     }; 
    }, 

    componentDidMount: function() { 
     this._isMounted = true; 
     const tickId = setInterval(this.tick, 1000); 
     this.setState({tickId: tickId}); 
    }, 

    componentWillUnmount: function() { 
     this._isMounted = false; 
     clearInterval(this.state.tickId); 
    }, 

    tick: function() { 
     if(this._isMounted) { 
      this.setState({ 
       currentTime: moment.utc().format(formatter) 
      }); 
     } 
    }, 

    render() { 
     return <span>{this.state.currentTime}</span>; 
    } 
}); 

Answer 2

tickIdを保存する必要はありません。

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

componentWillUnmount: function() { 
    clearInterval(this.tickId); 
}