Javascript 我应该如何更新React应用程序中的Redux状态？

我正在做一个React项目，我有一个“保存的游戏”部分

“已保存的游戏”部分映射“已保存的游戏”状态

这就是它看起来的样子：

let SavedGamesList = <h1>Loading...</h1>;
if (this.props.savedGamesState.length < 1) {
  SavedGamesList = <StyledNotSavedGames>Such empty</StyledNotSavedGames>;
}

if (this.props.savedGamesState.length >= 1) {
  SavedGamesList = this.props.savedGamesState.map(game => (
    <GameCard
      key={game.game}
      title={game.title}
      hoursViewed={game.hours_viewed}
      saved={true}
    />
  ));
}

deleteGame = () => {
  let gameName = this.props.title;
  this.props.deleteGame(gameName); //This is the Redux dispatch
  console.log(this.props.savedGamesState);
};

这就是我试图改变减速器状态的方法：

  case actionTypes.DELETE_GAME:
    let updatedGames = [
      ...state.savedGames.splice(
        state.savedGames.findIndex(e => e.title === action.payload),
        1
      )
    ];
    return {
      ...state,
      savedGames: updatedGames
    };

编辑：发送到道具：

deleteGame: (res) => dispatch({type: actionType.DELETE_GAME, payload: res})

我还注意到列表中的最后一个游戏无法删除，状态更新了，但是组件没有重新渲染，所以它没有消失

---

减缩器中可能有错误，您认为如何？

我认为您的问题是splice的返回值是已删除游戏的数组， 尝试类似的方法（注意，您也可以使用filter方法）：

---

另外，我认为最好使用游戏的键来删除它，而不是标题，除非标题是唯一的

向我们展示redux分派的代码

this.props.deleteGame

你能在你的DELETE_游戏案例中尝试一下吗：return{……state，savedGames:state.savedGames.filter（e=>e.title！==action.payload）}；

    case actionTypes.DELETE_GAME:{
        let updatedGames = [
          ...state.savedGames
        ];
        updatedGames.splice(
            updatedGames.findIndex(e => e.title === action.payload),
            1
        )

        return {
          ...state,
          savedGames: updatedGames
        };
}