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

以反应组件状态更新阵列

1 个答案: