行动派遣后无法获得新道具

Question

我有一个React组件：

class Board extends React.Component { 
  // ...
  compareLastPair() {
    const {gameplay} = this.props;
    console.log('after dispatching, before compare', gameplay.clickedTiles); //-> [1] 

    // i got old state as before dispatching an action, but expected refreshed props
    // thus, condition below never executes 

    if(gameplay.board.length === gameplay.pairedTiles.length + gameplay.clickedTiles.length) {
      this.compareTiles();
    }
  }

  handleClick(id) {
    const {gameplay, dispatch} = this.props;
    // ...some code
    else if(!gameplay.clickedTiles.includes(id) && gameplay.clickedTiles.length < 2) {
      console.log('before dispatching', gameplay.clickedTiles); // -> [1]          
      dispatch(clickTile(id));
      this.compareLastPair();           
    }
  }
  //...
}

我的reducer调度同步操作：

 const gameplay = (state = {board: [], clickedTiles: [], pairedTiles: [], round: 0}, action) => {
      switch(action.type) {
        case 'CLICK_TILE':
          return {...state, ...{clickedTiles: state.clickedTiles.concat(action.id)}} 
       }
    }

我的问题是：尽管状态由Redux更新（您可以在图像的Redux-logger中看到它），并且clickedTiles数组应该是，为什么我的compareLastPair函数与handleClick函数中的调度之前具有相同的道具由还原剂浓缩。

Answer 1

即使您的调度动作是同步的（但我们不知道...您没有共享代码），React组件中的props更新也会遵循正常的异步生命周期，而您显式调用{{1} }。

React / Redux不能通过这种方式工作：调用后，您的组件会收到新的道具。

为进行测试，建议您在compareLastPair生命周期方法内调用compareLastPair，该方法在更改属​​性后调用。