使用 splice() 删除项目

Question

I display in a component some movies that I get with an API call and a .map method. When I try to delete an item into this list of movies, the deletion is only done on the last item. I use the splice() method and I give an index to my deleteMovieFromFav() function. I don't know what I'm missing.. Would anyone know how to do it?

the function for delete a movie:

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

onClick for delete a movie:

{
 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

I used redux and I created an action for delete a movie from favorites, and now it is the first element that is deleted.. I would like my deleteMovie action to act on the id of the movie that has been added as favorites but I have access to this id only in the .map and not in redux..

movieReducer here:

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 here:

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