Aktualisierungsstatus innerhalb von setTimeout (React & React-Native)

Question

Was ich versucht habe zu erreichen, sind state zu aktualisieren und den gleichen Zustand wieder zu aktualisieren, basierend auf Javascript-Timer.

Der Grund, warum ich dies nicht erreichen kann, scheint die Natur von state in React.js zu sein.

Hier ist ein Ausschnitt aus meinen Experimenten ...

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

So ist es das Ziel Zustand für only just a few seconds if there is a specific props provided zu ändern.

Dieser Ansatz scheint die Grenze der Aktualisierungszustände zu erreichen, wenn this.props.hasError zu häufig aktualisiert wird.

Entschuldigung, wenn diese Frage zu einfach ist. Jeder Vorschlag wird geschätzt.

Answer 1

Sie verwenden Funktion innerhalb Timeout dies wird in ihrem Umfang Gebrauch arow Funktion

i entsprechend modifizieren

Code haben btw ändern

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

Sie sollten Ihren Status in render() -Funktion nicht aktualisieren. Wenn Sie dies tun, werden Sie in einer Endlosschleife enden, deshalb haben Sie diesen Fehler bekommen. Sie müssen verwenden:

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

Dies sollte Ihr Problem lösen.

Answer 3

Es gibt zwei Zwecke. Eine davon ist die Hintergrundfarbe dieser Komponente für 3 Sekunden zu ändern, die andere ist eine Nachricht zu zeigen, die befindet sich in (wieder für 3 Sekunden)

Da Sie nur diese Änderungen wollen zeigen 3 Sekunden müssen Sie sie zuerst setzen und dann den Status nach 3 Sekunden mit setTimeout auf das Gegenteil stellen.

zu urteilen aus dem Code, this.props.hasError ist ein boolean so können wir showWarning gesetzt mit dem zunächst:

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

Wenn die Komponente macht, wird es den aktuellen Zustand zeigen und nach 3 Sekunden, werden wir den Zustand ändern :

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