reactjs - 更新 Redux 存储以从数组中删除某些内容不会重新渲染

Question

我正在制作一个批量添加系统。在系统中我有一个 redux 存储属性名称 addPlayerList。在这里我将放置我将批量添加的所有玩家。现在，将玩家添加到添加玩家列表中不是问题，状态会反射(reflect)更改，并且它会正确渲染 Material UI 芯片。但是，当我通过 Chips 删除按钮删除它们时，状态会反射(reflect)在我的 redux 存储中，但不会重新渲染页面。所以该玩家不再存在于我的商店中，但他仍然出现在页面上。

如果我运行另一个搜索，本质上会导致其他内容重新渲染，它将正确修复列表。任何有关此问题的帮助将不胜感激。

class AddPlayer extends Component {

  onClick = () => {
    let {addPlayerToList} = this.props;
    addPlayerToList();
  }

  handleRequestDelete(index) {
    //figure out who the sender of it is
    let {removePlayerFromList} = this.props;
    removePlayerFromList(index);
  }

  render() {
    let {addPlayerToList, addPlayerList} = this.props
    let renderPlayersToAdd = () => {
      if (addPlayerList.length === 0) {
        return (
          <p>No Players to add</p>
        )
      }

       return addPlayerList.map((Player, index) => {
        return (
        <Chip 
          key={index} 
          onRequestDelete={this.handleRequestDelete.bind(this, index)}>
          <Avatar src={getImageURL(Player.id)} />
          {Player.name}
        </Chip>
        );
      }) 
    }

    return (
      <div>
         <TypeAhead />
         <RaisedButton onClick={addPlayerToList} label="Add Player" /> 
         {renderPlayersToAdd()}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    selectedSuggestion: state.selectedSuggestion,
    addPlayerList: state.addPlayerList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addPlayerToList(Player) {
      dispatch(actions.addPlayerToList(Player));
    },
    removePlayerFromList(index) {
      dispatch(actions.removePlayerFromList(index));
    }
  }
}

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    addPlayerToList: () => dispatchProps.addPlayerToList(stateProps.selectedSuggestion),
    addPlayerList: stateProps.addPlayerList,
    removePlayerFromList: (index) => dispatchProps.removePlayerFromList(index)
  }
}

const AddPlayerWithMutation = graphql(AddPlayerMutation)(AddPlayer);
const AddPlayerWithMutationAndState = connect(mapStateToProps, mapDispatchToProps, mergeProps)(AddPlayerWithMutation);
export default AddPlayerWithMutationAndState;

Answer 1

在 removePlayerFromList 的 reducer 代码中，make sure you're not mutating the original array 。所以不要使用splice(其中带有“p”)。而是做这样的事情

function removeIndex(array, index) {
  return [
    ...array.slice(0,index),
    ...array.slice(index +1)
  ];
};

这将创建一个新数组，但指定索引处没有值。这应该会导致重新渲染。

我不能保证这就是错误所在，但这是我最好的选择。