如何解决Redux更新状态数组中的项目
当用户单击edit时,我试图更新建筑物的名称和图像。我正确调度了动作,我认为尝试复制先前的state
并用新值更新它的逻辑是错误的,因为我没有看到该值被更新。只是恢复了以前的状态。请帮帮我吧!
这是我的代码:
import MyBuilding from '../../models/MyBuilding'
import { CREATE_BUILDING,DELETE_BUILDING,UPDATE_BUILDING} from '../actions/building'
const initialState = {
building: [],}
const BuildingReducer = (state=initialState,action) =>{
switch(action.type){
case CREATE_BUILDING:
const newBuilding = new MyBuilding(
action.buildingData.id,action.buildingData.name,action.buildingData.image,)
return { ...state,building: state.building.concat(newBuilding)}
case DELETE_BUILDING:
const filteredItems = state.building.filter(cb => cb.id !== action.deleteCB)
return {...state,building: filteredItems }
case UPDATE_BUILDING:
const updatedItems = state.building.map(cb => cb.id === action.updateItem.id ?
{...cb,name: action.updateItem.name,image: action.updateItem.image} : cb
)
return {...state,building: updatedItems }
default:
return state
}
}
export default BuildingReducer
解决方法
与商店连接的组件基本上只与Redux状态对话。 例子
let state = {
building: [1,2,3]
}
console.log({ ...state,building: state.building.concat([4,5,6])}) // you will see all building here
console.log(state) // but the actual state has not changed
将状态分配给所需的更改,然后返回该状态
case CREATE_BUILDING:
const newBuilding = new MyBuilding(
action.buildingData.id,action.buildingData.name,action.buildingData.image,)
state = { ...state,building: state.building.concat(newBuilding) } // do this
return state
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。