Reagieren: Asynchroner Aufruf Zustand vor dem endgültigen Rendern-Methode aufgerufen wird aktualisiert

Question

Hintergrund: Ich versuche, einige UI-Elemente zu verwenden Reagieren Sie auf eine JSON-Antwort von einem Webservice auf Basis zu aktualisieren, aber weil ich viele Elemente haben um gerendert zu werden, versuche ich die Bandbreite zu verringern, indem ich nur json ziehe, wenn der HashCode eines Elements aktualisiert wird. Im Rahmen meiner Anwendung kann ich das asynchrone Verhalten meiner Ajax-Aufrufe nicht aktualisieren. Was wäre der richtige Weg, um das Update auf meine Elemente erst nach dem asynchronen Aufruf zu erzwingen?
Ich weiß, Einstellungsstatus in WillUpdate ist falsch.

Beispiel:

getInitialState: function getInitialState() { 
     return { hash: 0, json: {}}; 
    }, 

    //Only get the step asJSON if the hash is updated 
    shouldComponentUpdate: function(nextProps, nextState) { 
     return this.state.json.hash != nextState.json.hash; 
    }, 

    tick: function(){ 
     this.updateHash(); 
    }, 

    updateHash: function updateHash(){ 
     something.getUpdateHash(function(data){ 
      var hashR = data.responseJSON; 
      this.setState({hash: hashR}); 
     }.bind(this)); 
    }, 

    updateJSON: function(){ 
     //This is an asynchronous call 
     something.getJSON(function(data){ 
      var stepJ = jQuery.parseJSON(data.responseJSON); 
      this.setState({json: stepJ}); 
     }.bind(this)); 
    }, 

    componentWillMount: function(){ 
     this.updateJSON(); 
    }, 

    componentDidMount: function(){ 
     this.interval = setInterval(this.tick, 10000); 
    }, 

    componentWillUpdate: function(nextState, nextProps){ 
     //Way to update json state w/o affecting state? 
    }, 

    render: function render() { 
     /** Only do render after updateJSON is complete **/ 
    } 

Answer 1

Wie wäre es Anruf updateJSON in Rückruf von updateHash

updateHash: function updateHash(){ 
    something.getUpdateHash(function(data){ 
     var hashR = data.responseJSON; 
     if(hashR!==this.state.hash){ 
      this.updateJSON(hashR) 
     } 
    }.bind(this)); 
}, 

updateJSON: function(hash){ 
    //This is an asynchronous call 
    something.getJSON(function(data){ 
     var stepJ = jQuery.parseJSON(data.responseJSON); 
     this.setState({json: stepJ,hash}); 
    }.bind(this)); 
}, 

Answer 2

Wenn ich richtig bin zu verstehen, sind Sie wollen das DOM nur aktualisieren, wenn eine Aktion (Überprüfung Hash) passiert in der Zukunft. Ich finde, dass das Ziehen dieser Logik aus dem Container, der die Logik anzeigt, hilfreicher ist und dazu führt, dass viele zustandslose Komponenten verwendet werden, die viel leichter zu verstehen sind.

// The component that you are housing everything in now 
// seconds would be your JSON 
const ActualDisplay = ({seconds}) => <div>It has been {seconds} since started</div> 

class App extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     seconds: 0 
    } 
    } 
    // This is so we can mimic the future checks 
    componentWillMount(){ 
    let seconds = this.state.seconds 
    setInterval(()=>{ 
     this.maybeUpdate(seconds) 
     seconds++ 
    },1000) 
    }; 
    // This is where you say 'if my hash is different, set state' 
    maybeUpdate = (seconds) =>{ 
    console.log(seconds) 
    if(seconds % 10 === 0){ 
     this.setState({ 
     seconds 
     }) 
    } 
    }; 

    render() { 
    // And because we are updating the state of THIS container 
    // we can just say 'Hey, whatever the state is of this, pass it down 
    return <ActualDisplay seconds={this.state.seconds} /> 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('mount') 
)