时间戳

首页 > 解决方案 > 使用 splice() 删除项目

javascript - 使用 splice() 删除项目

问题描述

我在一个组件中显示了一些通过 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>
 )
})
}

标签： javascriptreactjs

解决方案

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

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

推荐阅读