对象解构的特殊行为

Question

我有以下内容：

  @Action( RsRosCoughUiUpdate )
  rsRosCoughUiUpdate( { getState, patchState }: StateContext<IRs>, payload: IFormState ) {
    console.log( `classToPlain(payload) | ${JSON.stringify( classToPlain(payload) ) }` )
    console.log('PAYLOAD', payload)
    console.log('PAYLOAD STATUS', payload.status)
    console.log('PAYLOAD STATUS', payload['status'])
    console.log( `change-before | ${JSON.stringify( payload.change ) }` )
    console.log(classToPlain(payload))
    console.log( `change-after | ${JSON.stringify( payload.change ) }` )

    let {change, dirty, pristine, status, target, touched, untouched} = payload

    console.log(change, dirty, pristine, status, target, touched, untouched)

    const nextState = produce( getState(), draftState => {
      let {change, dirty, pristine, status, target, touched, untouched} = payload
      console.log( `change | ${JSON.stringify( payload.change ) }` )
//       draftState.ros.ui.cough = payload



//      draftState.ros.ui.cough =    {...payload}
//      draftState.ros.ui.cough.change = payload.change
//      draftState.ros.ui.cough.dirty = payload.dirty
//      draftState.ros.ui.cough.pristine = payload.pristine
//      draftState.ros.ui.cough.status = payload.status
//      draftState.ros.ui.cough.target = payload.target
//      draftState.ros.ui.cough.touched = payload.touched
//      draftState.ros.ui.cough.untouched = payload.untouched
    } )

    patchState( { ...getState(), ...nextState } )
  }

应用程序运行时，控制台日志如下所示：

classToPlain(payload) | {"payload":{"change":"add","dirty":true,"pristine":false,"status":"INVALID","target":"[cough->rs-ros]cmp","touched":true,"untouched":false}}
rs.store.ts:73 PAYLOAD RsRosCoughUiUpdate {payload: FormState}
rs.store.ts:74 PAYLOAD STATUS undefined
rs.store.ts:75 PAYLOAD STATUS undefined
rs.store.ts:76 change-before | undefined
rs.store.ts:77 {payload: {…}}payload: {change: "add", dirty: true, pristine: false, status: "INVALID", target: "[cough->rs-ros]cmp", …}__proto__: Object
rs.store.ts:78 change-after | undefined
rs.store.ts:82 undefined undefined undefined undefined undefined undefined undefined
rs.store.ts:86 change | undefined

删除所有调试信息并执行 console.log（有效负载）得到以下结果

问题： 1. 为什么解构后的值总是undefined？ 2.为什么payload对象图的点遍历总是undefined？

干杯

Answer 1

如我的评论所述，您可以在此处查看问题：

console.log('PAYLOAD', payload);

现在，如果您检查控制台结果，对于此日志，您会得到：

rs.store.ts:73 PAYLOAD RsRosCoughUiUpdate {payload: FormState}.

它说 payload 是一个 RsRosCoughUiUdpate，一个具有类型 FormState 的属性的对象 payload。我假设 FormState 是符合您的 IFormState 接口的类型。

所以，当然：

console.log(payload.change);

显示 undefined。

为了获得你的价值，你的解构应该是：

let {change, dirty, pristine, status, target, touched, untouched} = payload.payload

也许你应该更改 payload 变量的名称，因为它不是你想的那样。

对象解构的特殊行为

Peculiar behaviour of object destructuring

destructuring

typescript

typescript2.7