Question

我正在开发一个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}
    />
  ));
}

当我尝试删除游戏时，它会删除一个随机的游戏而不是我单击的游戏，或者一次删除多个游戏。

“ GameCard”（删除按钮在此处）的外观如下：

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

这是我尝试在Reducer中更改状态的方法：

  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})

我还注意到，列表中的最后一个游戏无法删除，状态已更新，但组件未重新渲染，因此它不会消失。

减速器中的某些东西可能是错误的，您怎么看？

Answer 1

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

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

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

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

我应该如何在我的React App中更新Redux状态？

1 个答案: