setTimeout（React＆React-Native）内の状態を更新する

Question

私が達成しようとしてきたことは、stateを更新し、Javascriptのタイマーに基づいて同じ状態を再度更新することです。

私がこれを達成できない理由は、React.jsのstateという性質のようです。ここで

だから、目的がonly just a few seconds if there is a specific props providedの状態を変更することです...

render() { 
    if (this.props.hasError) { 
     setTimeout(function(){this.setState({showWarning: true}); }.bind(this), 3000); 
    } 
    return (
     <View> 
     <Blah warning={this.state.showWarning} /> 
     </View> 
    ); 
} 

私の実験の抜粋です。

this.props.hasErrorが頻繁に更新されると、この方法は状態の更新の限界に遭遇しているようです。

この質問があまりにも基本的な場合は謝罪してください。 ご意見をお待ちしております。

Answer 1

これは、その範囲の使用arow機能を変更します

ところで、私は2つの目的があります。それに応じ

componentWillReceiveProps(nextProps) { 
    if(nextProps.hasError != this.props.hasError){ 
     this.setState({ 
      showWarning:nextProps.hasError 
     }); 
     setTimeout(()=> { 
      this.setState({ 
       showWarning:!this.props.showWarning 
      }); 
     }, 3000); 
    } 
} 


render() { 
    return (
     <View> 
     {this.state.showWarning?<Blah warning={this.state.showWarning} />:null} 
     </View> 
    ); 
} 

Answer 2

render（）関数で状態を更新しないでください。そうすると、無限ループに終わるので、そのエラーが発生します。

componentWillReceiveProps(nextProps){ 
    if (this.nextProps.hasError) { 
     setTimeout(function(){this.setState({showWarning: true}); }.bind(this), 3000); 
    } 
} 

これで問題が解決するはずです。あなたはタイムアウト内の関数を使用している

Answer 3

をあなたのコードを変更しています。一つは、他のは、あなただけのために表示するようにこれらの変更をしたいので （3秒間、再び）に位置しているメッセージ、

を示すようになって、3秒間、この コンポーネントの背景色を変更することです3秒後に、まずそれらを設定してから、setTimeoutを使用して3秒後に状態をその逆に設定する必要があります。我々が最初にそれとshowWarningを設定することができるように

あなたのコードから判断

、this.props.hasErrorはbooleanです：

constructor(props){ 
    super(props); 
    this.state = {showWarning: this.props.hasError} 
} 

コンポーネントをレンダリングするとき、それは現在の状態が表示され、3秒後に、我々は状態を変更します：

componentDidMount(){ 
    setTimeout(() => { 
    this.setState({showWarning: false}); 
    }, 3000); 
}