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

在這里閱讀更多