如何在反應中更新減速機狀態的數據

Question

這是我的減速機。我想根據ID在Reducer中更新我的數據而不會重複。

任何人都可以請幫助我。

這是我的代碼：

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; 
     } 
    } 

Answer 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); 
 
    

您的代碼

export const dataReducer = (state= InitialState , action = null) => { 
    switch(action.type) { 
    case types.UPDATE_DATA: 
     var temp = state.data.map(function(item){return (item.id == action.payload.id)? action.payload: item}) 
     return {...state, 
      data: temp 
     } 
    default: 
     return state; 
    } 
}