使用扩展运算符更新不同级别的状态答案

【问题标题】：using spread operator to update the state on different levels使用扩展运算符更新不同级别的状态
【发布时间】：2019-07-27 01:07:53
【问题描述】：

我有一个 reducer 状态初始化如下：

state = {
    name: ""
    authenticationObj: {
        userContactInfo: {
            billingAddress: {
                billingCountry: undefined,
                billingAddress1: undefined,
                billingAddress2: undefined,
                billingCity: undefined,
                billingPostalCode: undefined,
                billingPhoneNumber: undefined,
                billingFirstName: undefined,
                billingLastName: undefined,
                billingPersonalEmail: undefined,
                billingSelectedRegion: undefined
            },
        },
        subscriptions: [],
        fullName: "",
        subscriberDefaultPhoneNumber: ""
    }
}

现在我需要使用扩展运算符来更新状态，这就是我所拥有的：

case SET_SUBSC_LIST:
    state = { ...state,
        authenticationObj: { ...state.authenticationObj,
            subscriptions: action.payload.subscriptions
        }
    }

但是如果我想更新不同级别的属性怎么办。例如，如果我需要同时更新订阅以及 billingAddress1 中的 billingAddress1，我该如何实现？

【问题讨论】：

您不使用setState的任何原因？
@samb102 我需要使用redux

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

您可以使用 lodash 中的 merge 方法而不是扩展运算符，这样更易于阅读。

case SET_SUBSC_LIST:
    state = _.merge(state, { authenticationObj: {
            subscriptions: action.payload.subscriptions
        }
    }

【讨论】：

【解决方案2】：

state = {
  ...state,
  authenticationObj: {
    ...state.authenticationObj,
    userContactInfo: {
      ...state.authenticationObj.userContactInfo,
      billingAddress: {
        ...state.authenticationObj.userContactInfo.billingAddress,
        billingAddress1: action.payload.billingAddress1   
      }
    },
    subscriptions: action.payload.subscriptions
  }
};

【讨论】：

【解决方案3】：

如果您想同时更新订阅和 billingAddress1，您可以执行以下操作：

    case SET_SUBSC_LIST:
    state = { ...state,
        authenticationObj: { ...state.authenticationObj,
            subscriptions: action.payload.subscriptions,
            userContactInfo:{
                ...state.authenticationObj.userContactInfo,
                billingAddress: {
                    ...state.authenticationObj.userContactInfo.billingAddress,
                    billingAddress1: action.payload.billingAddress1
               }
            }

        }
    }

您需要传播传播，以便维护原始对象并仅更改您想要的字段。

【讨论】：

【解决方案4】：

Hamed Minaee，您可以使用扩展运算符更新不同的字段，但正如 samb102 所指出的，您应该使用 setState：

//you can do something like this:
this.setState(prevState => ({ ...prevState,
        authenticationObj: { ...prevState.authenticationObj,
            subscriptions: action.payload.subscriptions,
            userContactInfo: {
                ...prevState.authenticationObj.userContactInfo,
                billingAddress: {
                    ...prevState.authenticationObj.userContactInfo.billingAddress,
                    billingAddress1: "your new state value",
                }
            }
        }
    }))

正如您所见，这样做确实很乏味，因此更好的方法是复制状态并直接更改所需的属性：


const { authenticationObj } = this.state;

authenticationObj.subscriptions = action.payload.subscriptions;
authenticationObj.userContactInfo.billingAddress.billingAddress1 = "your new state value";

this.setState({ authenticationObj: authenticationObj });

【讨论】：