반응 구성 요소 상태의 배열 업데이트

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);});