Erzwingen Sie eine Neuwiedergabe (aktualisieren Sie den Status und aktualisieren Sie das DOM) sofort mit react.js

Question

Ich merke, dass Aufruf setState sofort this.state nicht aktualisiert, noch ruft es sofort render und aktualisieren Sie das DOM. Die Dokumentation sagt

setState() mutiert nicht sofort this.state, sondern erstellt einen ausstehenden Statusübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben.

Es gibt keine Garantie für den synchronen Betrieb von Aufrufen von setState, und Aufrufe können für Leistungssteigerungen gebündelt werden.

Ich würde gerne in der Lage sein, einen "Zustandsübergang" wie diesen jederzeit zu erzwingen. Dies scheint eine ziemlich natürliche Operation zu sein, aber ich kann in den Dokumenten keine Erwähnung finden. Gibt es einen Weg, es zu tun?

Answer 1

Sie forceUpdate dafür verwenden können:

Wenn Ihr Render() -Methode liest aus etwas anderes als this.props oder this.state, werden Sie reagieren müssen sagen, wann es re- muss rufe render() durch den Aufruf von forceUpdate(). Sie müssen auch forceUpdate() aufrufen, wenn Sie thate.state direkt mutieren.

https://facebook.github.io/react/docs/component-api.html#forceupdate

Answer 2

Sie ein forceUpdate in Verbindung mit mit einem Schlüssel auf der obersten Ebene Komponente als so ..

let key= 0; 

var Hello = React.createClass({ 

    sudoForceUpdate(){ 
    key++; 
    this.forceUpdate(); 
    }, 
    render: function(){ 
    return <div key={key}>Example</div>; 
    } 
}); 

Durch das Bearbeiten der Schlüssel und zwingen ein Update verwenden, wird der dom immer wieder rendern.

Hier ist ein Beispiel, das den Unterschied zwischen einem Force-Edit und einem Key-Change * hervorhebt.

https://jsfiddle.net/69z2wepo/82763/

* beachten Sie, dass dies wahrscheinlich ziemlich schlechte Praxis.

Dank Ben Alpert: https://groups.google.com/forum/#!topic/reactjs/8JgClU9jol0