复制数组时ngxs传播运算符不起作用答案

【问题标题】：ngxs spread operator when copying array not working复制数组时ngxs传播运算符不起作用
【发布时间】：2020-07-17 14:07:13
【问题描述】：

我尝试在我的状态中仅复制数组属性的值，但我没有让它按预期工作。当patchState 方法被调用而不是没有它时，应该更新状态。我做错了什么？

@Action(PostAttachment)
  postAttachment(ctx: StateContext<EditEntityStateModel>, { preview, selectedEntityId }: PostAttachment) {
    ctx.patchState({ currentlyUploading: true });
    const previews = [...ctx.getState().previews.data];
    console.log(previews);
    const updatedData = previews.map(previewFromMapping => {
      if (previewFromMapping.filename === preview.filename) {
        previewFromMapping.status = 'uploading';
      }
      return singleData;
    })
    console.log('new', updatedData);
    ctx.patchState({ previews: { ...ctx.getState().previews, data: updatedData }});
  }

所以第二个和第一个console.log() 是相同的，但它们不应该。它们都显示完全相同的输出。所以我想，我不小心复制了给定数组的状态引用，而不是值本身。 但为什么？

【问题讨论】：

值singleData在哪里定义？

标签： angular ngxs

【解决方案1】：

我仍然不清楚您缺少什么或想要发生什么，但我已经清理了您的代码，并对您打算发生什么做出了最好的猜测（如果有更多详细信息，我会更新答案提供）：

// START: TYPINGS 
class PreviewData {
  filename: string
}

class Preview {
  data: PreviewData[]
}

class EditEntityStateModel {
  previews: Preview;
  currentlyUploading: boolean;
}
// END: TYPINGS 

// START: ACTIONS 
class PostAttachment {
  static type = '[Previews] post attachment'
  constructor(public previewData: PreviewData, public selectedEntityId) {
  }
}
// END: ACTIONS
 
// START: STATE
  @Action(PostAttachment)
  postAttachment(ctx: StateContext<EditEntityStateModel>, { previewData }: PostAttachment) {
    const state = ctx.getState();
    const previewsData: PreviewData[] = [...state.previews.data];
    console.log(previewsData);
    const updatedData = previewsData.map(data => data.filename === previewData.filename ? {...data, status: 'uploading'} : data)
    // This should be a list of same length and data as previewsData, but with items with matching filename having a status of 'uploading'
    console.log('new', updatedData);
    ctx.patchState({ currentlyUploading: true, previews: { ...state.previews, data: updatedData }});
  }
 // END: STATE


  // Given a starting state:

  //  {
  //    previews: {
  //      data: [{
  //        filename: 'Hello',
  //        status: 'awaitingUpload'
  //      }, {
  //        filename: 'Goodbye',
  //        status: 'awaitingUpload'
  //      }]
  //    },
  //    currentlyUploading: false
  //  }

  // Dispatch action:

  // this.store.dispatch(new PostAttachment({ filename: 'Hello' });

  // Should result in state of: 

  //  {
  //    previews: {
  //      data: [{
  //        filename: 'Hello',
  //        status: 'uploading'
  //      }, {
  //        filename: 'Goodbye',
  //        status: 'awaitingUpload'
  //      }]
  //    },
  //    currentlyUploading: true
  //  }

【讨论】：