用splice()删除项目

Question

我在组件中显示一些通过API调用和.map方法获得的电影。当我尝试在这个电影列表中删除一个项目时，删除只在最后一个项目上进行。我使用了splice()方法，并给出了deleteMovieFromFav()函数的索引。我不知道我错过了什么。有人知道怎么做吗？

删除电影的函数：

deleteMovieFromFav = (idx) => {
    let { movies } = this.props.movieReducer;
    movies.splice(idx, 1)
    this.setState({movies: [...movies]})
}

删除电影的onClick ：

{
 this.props.movieReducer.movies.map((movie, idx) => {
  return(
   <div key={idx}>
    <Snackbar
      action={[
       <Button key="undo" color="secondary" size="small" 
        onClick={() => {
         this.deleteMovieFromFav(idx)
         this.handleCloseAlert()
        }}> Yes
       </Button>,
       <Button 
        key="no" 
        color="secondary" 
        size="small" 
        onClick={() => this.handleCloseAlert()}>
      ]}
    />
  </div>
 )
})
}

Answer 1

我使用了redux，创建了一个从收藏夹中删除电影的操作，现在它是第一个被删除的元素。我希望我的deleteMovie动作对作为收藏夹添加的电影的id进行操作，但是我只能在.map中访问这个id，而不能在redux中访问。

movieReducer 这里：

import { DELETE_MOVIE } from '../actionType/movies'

const initialState = {
  movies: []
};

export default (state = initialState, action) => {
  switch(action.type){
    case DELETE_MOVIE: 
      let selectedMovies = state.movies
      selectedMovies.splice(action.payload, 1)
      return {...state, movies: [...selectedMovies]};
    default:
      return state;
  }
}

movieActions 这里：

import { ADD_MOVIE, DELETE_MOVIE } from '../actionType/movies'
export const deleteMovie = (movie) => {
  console.log('movieid', movie)
  return {
    type: DELETE_MOVIE,
    payload: movie
  }
}