在 React 组件中更改 state 后 UI 未更新

Question

我一直在个人项目（简单的纸牌游戏）中使用 React。 我在我的 React 组件中调用 setState 来更改其 state 参数，我可以通过控制台验证是否进行了一些更改。 但是，用户界面根本没有改变。 我想知道为什么更改组件的 state 似乎不会触发其渲染方法。

具体来说，this.state.hand 的内容是通过在 dealCard 方法中向手牌添加一张牌成功更改的（具体是用包含新牌的新手牌替换旧手牌）。 但是，不会对牌局的最高分和最低分进行额外更新。 同时，UI 完全是 static，尽管 this.state.hand 已更改。

我尝试使用扩展运算符制作 this.state.hand 的浅表副本，如下所示。 这对我不起作用——它无法将新卡添加到 this.state.hand。

dealCard(card){
    const new_state = [...this.state.hand];
    new_state.push(card);
    this.updateState(this.state.hand, new_state);

这是我现在的代码：

class D9Hand extends React.Component {
  constructor(card1, card2){
    super([card1, card2]);
    this.state = {hand: [card1, card2], 
                  top_score: 0, 
                  btm_score: 0};
    this.MAX_CARDS_IN_HAND = 3;
    this.updateState = this.updateState.bind(this);
  };
  
  updateState(param, new_val){
    this.setState({param: new_val});
  }
  
  dealCard(card){
    let new_state = this.state.hand;
    new_state.push(card);
    this.updateState(this.state.hand, new_state); //state changed!
    this.countTopRow();                           //not updating scores!
    this.countBtmRow();
    console.log(this.state.hand, this.state.top_score, this.state.btm_score);
  };
  
  flip(card){
    card.flip();
    let new_state = [];
    for (const old_card of this.state.hand){
      if ((old_card.value_1 === card.value_2) && (old_card.value_2 === card.value_1)){
        new_state.push(card);
      } else {
          new_state.push(old_card);  
        };
    };
    this.updateState(this.state.hand, new_state); //state changed!
    this.countTopRow();                           //still not updating scores!
    this.countBtmRow();
    console.log(this.state.hand, this.state.top_score, this.state.btm_score);   
  };

  countTopRow() {
    let count = 0;
    for (const card of this.state.hand){
      count += card.value_1;
    };
    this.updateState(this.state.top_score, count % 10);
    return count % 10;
  };

  countBtmRow() {
    let count = 0;
    for (const card of this.state.hand){
      count += card.value_2;
    };
    this.updateState(this.state.btm_score, count % 10);
    return count % 10;
  };

  //other methods omitted for brevity's sake

  render(){
    return (
      <div className="hand">
      {this.state.hand.map(card => {
          return (
          <div>
            <div className="card">card</div> 
            <button className="button" onClick ={() => this.flip(card)}>{this.getFlipBtnText(card)}</button>
          </div>
          )  
      })}
        <div className="score-column">
          <div className="score">{this.countTopRow()}</div>
          <div className="score">{this.countBtmRow()}</div>
        </div>
      </div>
    );
  };
}

Answer 1

state update in react not take place immediately,to overcome this you can pass call back function to react set state,which will be called exactly after state change take place,so what i will suggest is,instead of calling this.countTopRow(); after update state, you can pass a cllback function to updateSTate,which will be passed to setState function from update state function like this

updateState(param, new_val,callback){
  if(callback){
    this.setState({param: new_val},callback);
  }else{
      this.setState({param: new_val});
  }

}

现在你的翻转（卡）function 应该是这样的

 flip(card){
    card.flip();
    let new_state = [];
   for (const old_card of this.state.hand){
  if ((old_card.value_1 === card.value_2) && (old_card.value_2 === card.value_1)){
    new_state.push(card);
  } else {
      new_state.push(old_card);  
    };
};
this.updateState(this.state.hand, new_state,()=>{
   this.countTopRow();
   this.countBtmRow();
 });
 };

在这里阅读更多