画面がreact-nativeで読み込まれたときに、3から1にカウントダウンしたいと思います。このようにsetTimeOutで試してみましたが、うまくいきませんでした。私はここで何が間違っているのですか？どうすればこれを達成できますか？画面が読み込まれたら、1秒間隔で3 =-> 2 ==> 1を表示したいと思います。これが私のコードです。
constructor(props) {
super(props);
this.state = {
timer: 3
}
}
// componentDidMount
componentDidMount() {
setTimeout(() => {
this.setState({
timer: --this.state.timer
})
}, 1000);
}
コードでは、setTimeoutはcomponentDidMountで呼び出され、ComponetDidMountはコンポーネントのライフサイクル全体で1回呼び出されます。したがって、setTimeout内の関数は1回だけ呼び出されます。つまり、最初のレンダリングの直後ですが、後続のレンダリングでは、componentDidMountは呼び出されません。
問題の解決策は次のとおりです。
constructor(props: Object) {
super(props);
this.state ={ timer: 3}
}
componentDidMount(){
this.interval = setInterval(
() => this.setState((prevState)=> ({ timer: prevState.timer - 1 })),
1000
);
}
componentDidUpdate(){
if(this.state.timer === 1){
clearInterval(this.interval);
}
}
componentWillUnmount(){
clearInterval(this.interval);
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', }}>
<Text> {this.state.timer} </Text>
</View>
)
}setIntervalによるメモリリーク：clearIntervalが呼び出される前にコンポーネントをアンマウントすると、開始時に設定された間隔とタイマーが停止しないため、メモリリークが発生します。Reactは、コンポーネントがマウント解除または削除されたときにクリアする必要があるものをすべてクリアする機会として、componentWillUnmountライフサイクルメソッドを提供します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加