レンダリング内部のタイマーを更新すると警告が表示されます

Question

純粋ではないため警告が表示されることがわかりました。しかし、componentDidMount()に入れても更新されません。一度減らすだけです。

これは私が持っているものです。

class timer extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     seconds: 900 
    }; 

    } 

    render() { 
    setTimeout(() => { 
     if(this.state.seconds > 0){ 
     this.setState({seconds: this.state.seconds-1}) 
     } 
    }, 1000); 
    } 
} 

まだそれは純粋ではないことについて警告なしsetTimeOut()を使用することができることながら、どのように私はどこか別の状態を更新することができますか？

Answer 1

あなたは1秒ごとに数値を減らそうとしているようですので、settimeoutの代わりにsetintervalメソッドを使用してください。これをcomponentdidmount関数に追加すると、最初のレンダリングが発生した後に瞬時に減少し始めます。

componentDidMount(){ 
    this.setInterval(() => { 
     if(this.state.seconds > 0){ 
     this.setState({seconds: this.state.seconds-1}) 
      }) 
     }, 1000); 
}