반응에서 감속기 상태의 데이터를 업데이트하는 방법

Question

이것은 내 감속기입니다. ID를 기반으로 중복되지 않고 감속기의 데이터를 업데이트하고 싶습니다.

아무도 도와 줄 수 있습니까? 내가 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; 
    } 
} 

: 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

이 데이터를 업데이트합니다. array 내의 object와 일치하는 경우.

이전에 삭제하고 새 데이터를 추가하려는 경우 한 번 시도해 볼 수 있습니다.

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