反应：来自 mapStateToProps 的 Redux 状态在调用调度后未更新答案

【问题标题】：React: Redux state from mapStateToProps not updating after dispatch is called反应：来自 mapStateToProps 的 Redux 状态在调用调度后未更新
【发布时间】：2020-08-08 16:45:12
【问题描述】：

当我从组件内部调度一个动作（即单击一个按钮）时，动作中更改的状态不会立即在组件的道具中更新。我通过 Redux 的 connect 函数连接 state 和 dispatch 到 props。我确实注意到它在组件的渲染中正确更新。

Game.jsx

const Game = ({ playerCards, add }) => {
  const stand = () => {};

  const hit = () => {
    add(getNextCard());
    console.log(playerCards); // Outputs the old state
  };

  return (
    <div className="container--center">
      <div className="container__inner--center">
        <div className="game-wrapper">
          <div className="game-wrapper__inner">
            <Player />

            <form className="player-actions">
              <button type="button" onClick={stand}>
                Stand
              </button>
              <button type="button" onClick={hit}>
                Hit
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect(
  (state) => {
    return {
      playerCards: state.cards.player,
    };
  },
  (dispatch) => {
    return {
      add: (card) => dispatch(addPlayerCard(card)),
    };
  }
)(Game);

addPlayerCard 操作

const addPlayerCard = (card = {}) => {
  return {
    type: ADD_PLAYER_CARD,
    card,
  };
};

【问题讨论】：

标签： reactjs redux

【解决方案1】：

第一个状态更新是异步的。

第二次，当您发送 add(getNextCard()) 时，您想更新 UI 中的某些状态以再次渲染，因此新状态将在下一次重新渲染之前可用，并且尝试获取新状态没有任何意义在调度调用之后。

所以新的playerCards 值将打印在 UI 中（在渲染函数中）。

【讨论】：