react.js - redux执行删除操作

问题描述

问 题

通过redux进行数据管理，当点击删除列表中的某一项时，显示的结果是清空了整个列表，
重新刷新之后，没有被删除的其他项才重新load出来，要删除的那一项也确实是删除了。

export function getStartupStatus(state = {
  startupStatuses: []
},action) {
  switch (action.type) {
    // 获取数据时
    case STARTUP_STATUS_SUCCESS:
      let response = action.response
      let startupStatuses = response.entities.startupStatus
      return Object.assign({}, state, {
        startupStatuses: response.result.map(id => startupStatuses[id])
      })
     // 添加一项
    case ADD_STATUS_SUCCESS:          
      var response = action.response
      state.startupStatuses.push(response.entities.startupStatus[response.result])
      return state
      // 修改其中一项
    case UPDATE_STATUS_SUCCESS:        
      var response = action.response
      return Object.assign({}, {
        startupStatuses: Array.from(state.startupStatuses, (item,index) => {
          return item.id == response.result ? response.entities.startupStatus[response.result] : item
        })
      })
      // TODO 删除
    case DELETE_STATUS_SUCCESS:  
      var response = action.response
      return state.startupStatuses.filter(item => {
        (item.id != response.result.id)
      })
    default:
      return state
  }
}

添加和修改操作也没任何问题，删除时，返回的值都是正常的，前台显示删除成功，也没有任何报错信息，删除成功后state.startupStatuses返回的也是过滤后删除项的新数组，不明白为什么删除一项后，其他项也都不显示了，需要刷新后才显示出来。删除后，直接执行添加操作，会提示push undefinded

解决方案

改为：

    case DELETE_STATUS_SUCCESS:  
      var response = action.response
      return {
        startupStatuses: state.startupStatuses.filter(item => {
          (item.id != response.result.id)
        })
      }

startupStatuses 被你丢了。

你的 ADD 写的也有问题，不要去修改state，只能构造新值。

更新：
漏了一点，请见 @two_cat 的答案。

这篇关于react.js - redux执行删除操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！