Aktualisieren von Arrays im Zustand der Reaktionskomponenten

Question

In der folgenden Funktion versuche ich den Zustand einer Reaktionskomponente zu aktualisieren; Der animalMix-Eintrag ist ein Array. Ich nehme eine Kopie, aktualisiere sie und versuche dann, das Original zu überschreiben. Ich habe überprüft, dass das neue Array (newAnimalsHeld) korrekt aktualisiert wurde, aber dies wird nicht angezeigt, wenn ich animalMix in den Status gleich gesetzt habe. für jede Hilfe https://codepen.io/timsig/pen/XVdbdo?editors=0010

Vielen Dank:

Das Ganze kann hier in Zusammenhang zu sehen.

removePair(){ 
    console.log('Match!'); 
    console.log(this.flipped); 

    let animalsHeld = [...this.state.animalMix]; 
    let theMatch = this.flipped[0].props.animal; 

    let newAnimalsHeld = animalsHeld.map(function(animal){ 
    if (animal.animal === theMatch) { 
     console.log('MATCH! Animal: ' + animal.animal + 'Match:' + theMatch); 
     return {}; 
    }else{ 
     return animal; 
    } 
    }); 

    console.log('New Animals held: ', newAnimalsHeld); 
    this.setState({ 
    animalMix: newAnimalsHeld, 
    doTurn: true 
    }); 

    this.flipped = []; 
    console.log(this.state.doTurn, this.state.animalMix); 
} 

Answer 1

setState ist eine asynchrone Funktion. Sie können jedoch auf der Konsole drucken nach Zustand in folgenden Weise aktualisiert:

this.setState({ 
    animalMix: newAnimalsHeld, 
    doTurn: true 
},() => {console.log(this.state.doTurn, this.state.animalMix);});