使用 splice() 删除项目答案

【问题标题】：delete item with splice()使用 splice() 删除项目
【发布时间】：2019-09-19 14:46:55
【问题描述】：

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

【问题讨论】：

拼接reducer没有意义。 reducer 是一个函数，splice 对数组进行操作。 movies实际上给了你什么？
@jmargolisvt 好像你被变量名挂断了？
那么你为什么在地图上使用道具，但使用状态？好像你这里发生了不匹配。
因为当您更新它时，您会显示将其传递给 mapDispatchToProps 而不是您当地的州
我使用reducer，因为我在一个组件中显示API的所有电影，然后一个按钮允许您将电影添加到最喜欢的组件，在这种情况下，这里添加的电影是最喜欢的电影.所以在我的deleteMovieFromFav() 函数中，movies 变量对应于添加为收藏的电影。我希望我已经说清楚了..

标签： javascript reactjs

【解决方案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
  }
}

【讨论】：

您可以尝试从调用此deleteMovie 操作的位置发送索引作为参数吗？