对象传播未正确复制对象答案

【问题标题】：Object spread doesn't copy the object properly对象传播未正确复制对象
【发布时间】：2018-10-18 20:34:45
【问题描述】：

我在使用对象传播时遇到了一个奇怪的问题。这是我的代码：

const AuthenticationReducer = (state = {
authenticationObj: {
    "isAuthenticating": true, "isAuthentic": false, "subscriberId": "NA", "username": "NA",
    "firstName": "NA", "lastName": "NA", "enabled": "1", "email": "NA", isAuthorized: false
}, lastPasswordCheckStatus: undefined, isSuccessfulChangePassword:undefined,loginUserCheckStatus: undefined, createUserCheckstatus: undefined,
confirmUserCheckstatus: undefined, isSuccessfulChangeEmail:undefined, userContactInfo: {
    country: undefined,
    address1:undefined,
    address2:undefined,
    city:undefined,
    postalCode:undefined,
    phoneNumber: undefined
}
 }, action) => {

switch (action.type) {
    case SET_USER_CONTACT_INFO:
        console.log(JSON.stringify(state));
        state = {
            ...state,
            authenticationObj: {
                ...state.authenticationObj, userContactInfo: action.payload.userContactInfo
            }
        };
        console.log(JSON.stringify(state));
        console.log(action.payload.userContactInfo);

}
return state;
 };
    export default AuthenticationReducer;

SET_USER_CONTACT_INFO 调用前的状态如下：

{
"authenticationObj": {
    "isAuthenticating": false,
    "isAuthentic": true,
    "subscriberId": 4424,
    "username": "cccc",
    "firstName": "null",
    "lastName": "null",
    "email": "cccc",
    "isAuthorized": true
},
"userContactInfo": {}
}

如您所见，“userContactInfo”：{} 是空对象，现在只要发送 SET_USER_CONTACT_INFO 请求，我就会明白：

{
"authenticationObj": {
    "isAuthenticating": false,
    "isAuthentic": true,
    "subscriberId": 4424,
    "username": "vvvv",
    "firstName": "null",
    "lastName": "null",
    "email": "vvv",
    "isAuthorized": true,
    "userContactInfo": {
        "country": "Canada",
        "address1": "ssss",
        "address2": "sss",
        "city": "ssss",
        "postalCode": "ss",
        "phoneNumber": "sss"
    }
  },
    "userContactInfo": {}
 }

我得到两个 userContactInfo 一个空的和一个带有信息的。真的很奇怪，我希望带有新信息的 userContactInfo 被空的替换。我的代码有什么问题？有什么帮助吗？

【问题讨论】：

... is not an operator! 。这与 JSX 或 React 或 redux 无关。
@FelixKling thanx 我修正了措辞

标签： reactjs ecmascript-6 redux es6-class

【解决方案1】：

我希望带有新信息的 userContactInfo 被替换为空的。

这两个userContactInfo 处于不同的级别。一个在顶层，在authenticationObj 旁边，另一个在authenticationObj 本身的值中，通过查看缩进很容易看到。此外，一个对象不能有两个同名的属性。

{
  "authenticationObj": {
    "isAuthenticating": false,
    "isAuthentic": true,
    "subscriberId": 4424,
    "username": "vvvv",
    "firstName": "null",
    "lastName": "null",
    "email": "vvv",
    "isAuthorized": true,
    "userContactInfo": {         // <root>.authenticationObj.userContactInfo
      "country": "Canada",
      "address1": "ssss",
      "address2": "sss",
      "city": "ssss",
      "postalCode": "ss",
      "phoneNumber": "sss"
    }
  },
  "userContactInfo": {}          // <root>.userContactInfo
}

即您将对象合并到错误的级别。看来你想要的是

state = {
  ...state,
  userContactInfo: action.payload.userContactInfo
};

【讨论】：

【解决方案2】：

这个：状态 = { ...状态，身份验证对象：{ ...state.authenticationObj, userContactInfo：action.payload.userContactInfo } };

应该是：状态 = { ...状态，用户联系信息：{ ...state.userContactInfo action.payload.userContactInfo } };

您已经告诉脚本将 action.payload.userContactInfo 插入到 authenticationObj 中，而它应该作为同级放置。

对不起，我在手机上写了这篇文章。

【讨论】：