Reactjs Redux减速器不'；t更新密钥

您好，我正在尝试让reducer“removePlayer”更新它生成的状态，使selectedPlayerIndex为-1，但我似乎无法使其正常工作，我已经查找了类似的问题，但找不到任何足以回答我问题的信息

这是密码

import * as PlayerActionTypes from '../actiontypes/player';

const initialState = {
    players: [{
        name: 'Jim Hoskins',
      score: 31,
        created: '11/8/2016',
        updated: '11/9/2016'
    },
    {
        name: 'Andrew Chalkley',
        score: 20,
        created: '11/9/2016',
        updated: '11/10/2016'
    },
    {
        name: 'Alena Holligan',
        score: 50,
        created: '11/11/2016',
        updated: '11/12/2016'
    }
    ],
    selectedPlayerIndex: -1
}


export default function Player(state=initialState, action) {
  switch(action.type) {

    case PlayerActionTypes.REMOVE_PLAYER:
    const removePlayerList = [
      ...state.players.slice(0, action.index),
      ...state.players.slice(action.index + 1)
    ];
      return {
                  ...state,
          players: removePlayerList,
          selectedPlayerIndex: -1
      }

    case PlayerActionTypes.SELECT_PLAYER:
      return {
        ...state,
        selectedPlayerIndex: action.index
      }

    default:
      return state;
  }
}

这是顶层组件

class Scoreboard extends Component {
  static propTypes = {
    players: PropTypes.array.isRequired,
    selectedPlayerIndex: PropTypes.number.isRequired
  };

  render() {
    const { dispatch, players, selectedPlayerIndex } = this.props;
    const addPlayer = bindActionCreators(PlayerActionCreators.addPlayer, dispatch);
    const removePlayer = bindActionCreators(PlayerActionCreators.removePlayer, dispatch);
    const updatePlayerScore = bindActionCreators(PlayerActionCreators.updatePlayerScore, dispatch);
    const selectPlayer = bindActionCreators(PlayerActionCreators.selectPlayer, dispatch)

    const playerComponents = players.map((player, index) => (
      <Player
        index={index}
        name={player.name}
        score={player.score}
        key={player.name}
        updatePlayerScore={updatePlayerScore}
        removePlayer={removePlayer}
        selectPlayer={selectPlayer}
      />
    ));
    return (
      <div className="scoreboard">
        <Header players={players} />
        <div className="players">
          { playerComponents }
        </div>
        <AddPlayerForm addPlayer={addPlayer} />

        <div className="player-detail">
          <PlayerDetail players={players} selectedPlayerIndex={selectedPlayerIndex} />
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => (
  {
    players: state.players,
    selectedPlayerIndex: state.selectedPlayerIndex
  }
);

export default connect(mapStateToProps)(Scoreboard);

类记分板扩展组件{
静态类型={
玩家：PropTypes.array.isRequired，
selectedPlayerIndex:PropTypes.number.isRequired
};
render（）{
const{dispatch，players，selectedPlayerIndex}=this.props；
const addPlayer=bindActionCreators（PlayerActionCreators.addPlayer，dispatch）；
const removePlayer=bindActionCreators（PlayerActionCreators.removePlayer，调度）；
const updatePlayerScore=bindActionCreators（PlayerActionCreators.updatePlayerScore，dispatch）；
const selectPlayer=bindActionCreators（PlayerActionCreators.selectPlayer，调度）
const playerComponents=玩家。地图（（玩家，索引）=>(
));
返回(
{playerComponents}
);
}
}
常量mapStateToProps=状态=>(
{
球员：国家队，球员，
selectedPlayerIndex:state.selectedPlayerIndex
}
);
导出默认连接（mapStateToProps）（记分板）；

下面是调度remove_player的子组件的组件

import React, { PropTypes } from 'react';
import Counter from './Counter';

const Player = props => (
  <div className="player">
    <div className="player-name" onClick={() => props.selectPlayer(props.index)}>
      <a className="remove-player"
        onClick={() => props.removePlayer(props.index)}>
        ✖
      </a>
      {props.name}
    </div>
    <div className="player-score">
      <Counter
        index={props.index}
        updatePlayerScore={props.updatePlayerScore}
        score={props.score}
      />
    </div>
  </div>
);

import React，{PropTypes}来自'React'；
从“./Counter”导入计数器；
康斯特玩家=道具=>(
props.selectPlayer（props.index）}>
props.removePlayer（props.index）}>
✖
{props.name}
);

---

我已尝试将代码保留在我认为必要的范围内，如果您需要查看应用程序的其他部分，请告诉我。

看起来您有一个嵌套的onClick事件。当您单击removePlayer时，它会传播到selectPlayer。这是由于事件冒泡。您需要阻止事件向上传播到selectPlayer组件

event.stopPropagation();

您需要将removePlayer onClick函数更改为类似以下内容：

function(event) {
    props.removePlayer(props.index);
    event.stopPropagation();
}

---

有关事件冒泡和捕获的更多信息，请参见

能否更具体地说明“什么”不起作用？您是否有Redux开发工具来跟踪状态更改和操作？你能把代码添加到你分派动作的地方吗？对于REMOVE_PLAYER操作，您不需要在状态的其余部分之前…state，因为您正在更新状态中的两个密钥。这在隔离环境中起作用：我怀疑问题可能出在您的调度中。可能是操作类型不匹配导致它陷入默认情况？@Genzume在我查看了redux扩展之后，似乎当我调用REMOVE_PLAYER操作时，它也立即调用SELECT_PLAYER操作。@Sparky如果我提供相关的组件会有帮助吗？@Ricky你能更新代码以包含调用添加/删除的播放器组件？这就是问题所在！谢谢这很有帮助