代码之家  ›  专栏  ›  技术社区  ›  user9777330

React组件在Redux中状态更改后不会重新渲染

  •  1
  • user9777330  · 技术社区  · 8 年前

    所以我有一个减速机,有几种不同的情况。所有其他情况(ADD\u VEHICLE、UPDATE\u VEHICLE等)都可以正常工作,但DELETE\u VEHICLE在状态更新后不会重新渲染。如您所见,我只是使用splice()从数组中删除一个项。我已经确认它正在删除带有控制台日志的项目,但它仍然不会像添加和更新那样刷新。奇怪的是,如果我将其设置为将其他任何内容指定给对象内的vehicles属性,它将使其变得很好。但是,当我尝试将其设置为当前状态时,它拒绝渲染它。车辆。

    我尝试过的事情:

    • 将车辆设置为状态。车辆
    • 仅返回状态
    • 将车辆设置为状态
    • 什么都不退

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

    我的减速机:

    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;
        }
    }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Tomasz Mularczyk    8 年前

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

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

    似乎您并没有在代码中真正删除该元素。