javascript - React 组件不会在 Redux 中的状态更改后重新呈现

Question

所以我有一个 reducer 有几种不同的情况。所有其他情况(ADD_VEHICLE、UPDATE_VEHICLE 等)都工作得很好，但 DELETE_VEHICLE 不会在状态更新后重新渲染。如您所见，我只是使用 splice() 从数组中删除一个项目。我已经确认它正在删除带有控制台日志的项目，但它仍然不会像添加和更新那样刷新。奇怪的是，如果我这样做是为了将任何其他内容分配给对象内的车辆属性，它就会渲染得很好。但是，当我尝试将其设置为当前 state.vehicles 时，它拒绝呈现它。

我尝试过的事情:

• 将车辆设置为 state.vehicles
• 简单的返回状态
• 设置车辆状态
• 根本不返回任何东西

无论我做什么，它都不会重新呈现没有删除项目的列表。如果重要的话，我已经确认该项目正在数据库中删除。

我的 reducer :

function vehicleTableReducer (state = {}, action) {
    switch (action.type) {
        case REQUEST_VEHICLES:
            return state
        case RECEIVE_VEHICLES:
            return Object.assign({}, state, { vehicles : action.vehicles })
        case ADD_VEHICLE:
            state.vehicles.push(action.vehicle)
            return Object.assign({}, state, { tableState : action.tableState })
        case DELETE_VEHICLE:
            var v = state.vehicles.find(v => v.id == action.vehicle.id)
            var index = state.vehicles.indexOf(v)
            state.vehicles.splice(index, 1)
            return Object.assign({}, state, { vehicles : state.vehicles })
        case UPDATE_VEHICLE:
            var v = state.vehicles.find(v => v.id == action.vehicle.id)
            var index = state.vehicles.indexOf(v)
            state.vehicles[index] = action.vehicle
            return Object.assign({}, state, { vehicles : state.vehicles })
        case TOGGLE_TABLE_STATE:
            return Object.assign({}, state, { vehicles : state.vehicles, tableState : action.tableState })
        default:
            return state;
    }
}

Answer 1

尝试简单地过滤掉不需要的元素:

case DELETE_VEHICLE:
   var newVehicles = state.vehicles.filter(v => v.id !== action.vehicle.id)
   return Object.assign({}, state, { vehicles : newVehicles })

看来您并没有真正删除代码中的那个元素。