最近在踩坑react,demo使用了redux,发现删除数据页面没有任何变化。
代码如下:
demo.js:
const dispatchToProps = (dispatch)=>{
return{
deleteItem(index){
const action = deleteItemAction(index)
dispatch(action)
}
}
}
store/reducer.js:
export default (state=defaultState,action)=>{
if(action.type === DELETE_ITEM){
let newState = Object.assign({},state)
newState.list.splice(action.index,1)
return newState
}
return state
}
后来发现问题出在Object.assign(),这个方法只能做一层的深拷贝,如果属性的值是引用类型,就无法深拷贝了。
正确的写法是:
export default (state=defaultState,action)=>{
if(action.type === DELETE_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index,1)
return newState
}
return state
}