如何在react中更新reducer状态中的数据

Question

这是我的减速机。我想根据 ID 更新减速器中的数据而不重复。

谁能帮帮我吗。

这是我的代码：

export  const dataReducer = (state= InitialState , action = null) => {
    switch(action.type) {
    case types.UPDATE_DATA:
        return Object.assign({}, state, {
    data: [
      ...(state.data.filter(item => (item.id !== action.payload.id))), 
      action.payload
    ]
    default:
        return state;
    }
}

我想删除 id : 2 并想将新数据添加到状态中。

var state = {
   data: [
     {id: 1, data: "Hello"}, {id: 2, data: "World"}
   ]
}
var payload= {id:2, data: "SO"}
var data1 = state.data.map(function(item){return (item.id == payload.id)? payload: item})

var data = {...state,
               data: data1
             }
console.log(data);

它应该更新为，

var state = {
   data: [
     {id: 1, data: "Hello"}, {id: 3, data: "Value"}
   ]
}

Answer 1

这将更新数据。如果它与数组中的任何对象匹配。

   export  const dataReducer = (state= InitialState , action = null) => {
        switch(action.type) {
        case types.UPDATE_DATA:
            return Object.assign({}, state, {
               data: state.data.map(item => {
                   return item.id === action.payload.id ? action.payload : item;
               }); // replace matched item and returns the array 
            }); 
        default:
            return state;
        }
    }

如果您想删除以前的数据并添加新数据，那么您可以尝试一次。

 export  const dataReducer = (state= InitialState , action = null) => {
        switch(action.type) {
        case types.UPDATE_DATA:
            return Object.assign({}, state, {
               data: state.data.filter(item => {
                   return item.id !== action.id; //delete matched data
               }).concat(action.payload); //concats new data
            }); 
        default:
            return state;
        }
    }