Question

每当点击按钮时，我都会传递id，所以我的州有三个对象

state = items:[{
 id:1,
 material: 'iron'
},
 id:2,
 material: 'steel'
},
 id:3,
 material: 'coal'
}]


//reducer.js

case actionTypes.UpdateMaterialToShow:
  return {
   ...state,
   items: state.items.map(obj => {
    if(obj.id === action.payload.id){
      obj.['show'] = action.payload.status
    }
  }) 
}

所以每当调用该方法时我都会传递id和status，所以我需要将该属性添加到state.items

如果点击的按钮是铁，则预期输出

state = items:[{
 id:1,
 material: 'iron',
 status: true
},
 id:2,
 material: 'steel'
},
 id:3,
 material: 'coal'
}]

如何在不改变状态

的情况下返回如上所示的更新状态

Answer 1

使用Array.map()时，会创建一个新数组。每当对象的id等于有效负载的id时，您需要根据旧对象创建一个具有更新属性的新对象。

您可以使用Object.assign()或object spread（如示例所示）来创建新对象：

case actionTypes.UpdateMaterialToShow:
  return {
    ...state,
    items: state.items.map(obj => {
      if (obj.id === action.payload.id) {
        return { ...obj,
          status: action.payload.status
        };
      }

      return obj;
    })
  }

Answer 2

您可以使用Reactjs#spread-attributes。

return {
  ...state,
  items: state
    .items
    .map(obj => {
      if (obj.id === action.payload.id) {
        return {
          ...obj,
          status: action.payload.status
        }
      } else {
        return obj;
      }
    })
}

根据条件更新状态并添加新属性，最后检索更新状态

2 个答案: