反応コンポーネント状態の配列の更新

Question

以下の関数では、反応コンポーネントの状態を更新しようとしています。 animalMixアイテムは配列です。私はコピーを取ってそれを更新し、元のものを上書きしようとします。新しい配列（newAnimalsHeld）が正しく更新されていることを確認しましたが、animalMixを同じ状態に設定すると反映されません。

全体のことは、ここでは文脈で見ることができます任意の助け https://codepen.io/timsig/pen/XVdbdo?editors=0010

感謝を。

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は非同期関数です。ただし、状態は次のように更新した後のコンソールに印刷することができます。

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