Question

我使用对象传播有一个奇怪的问题。这是我的代码：

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": {}
}

如您所见＆＃34; userContactInfo＆＃34;：{}是空对象，现在只要调度了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设置为空，将其中一个设为info。真的很奇怪我期望带有新信息的userContactInfo被替换为空信息。我的代码出了什么问题？有什么帮助吗？

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

Answer 2

此： state = { ...州， authenticationObj：{ ... state.authenticationObj， userContactInfo：action.payload.userContactInfo } };

应该是： state = { ...州， userContactInfo：{ ... state.userContactInfo action.payload.userContactInfo } };

您已告知脚本将action.payload.userContactInfo插入authenticationObj，而它应作为兄弟放置。

很抱歉，我在手机上写了这个。

对象传播不会正确复制对象

2 个答案: