JavaScript array.map 总是返回最后一项

Question

我有一个对象数组，对象如下所示：

interface IDog{
  id: number;
  name: string;
  summary: string;
  wikiLink: string;
  imageLink: string;
  imageAlt: string;
}

我有这个功能：

  private processDog(dogs: IDog[]) {
  return dogs.map((dog) => {
      let displayCard = this.dogDisplay;

      find(displayCard.body, { id: "cardHeader" }).items[0].text = dog.name;
      let adaptiveCard = CardFactory.adaptiveCard(displayCard);

      let preview = this.dogPreview;
      preview.content.title = dog.name;
     
      return { ...adaptiveCard, preview };
    });
  }

现在，当我调用此函数时，传递 Dogs 数组，假设 [DogA, DogB, DogC, DogD]

    let att = this.processDog(dogs);

我希望根据需要 return 处理过的狗的数组，但是 returned 是一个包含 4 个 DogD 类型的处理过的狗的数组。这意味着 DogD 正在掩盖所有其他狗returned 数组中的狗。我做错了什么？

完整代码：

//First method
      public async onQuery(
        context: TurnContext,
        query: MessagingExtensionQuery
      ): Promise<MessagingExtensionResult> {
     
     const dogs: any = require("./dogs.json");
     let att = this.processdog(dogs);
     console.log(att);
     return Promise.resolve({
            type: "result",
            attachmentLayout: "list",
            attachments: att, // [{ ...adaptiveCard, preview: defaultPreview }],
          } as MessagingExtensionResult);
    }

//second method

 private processdog(dogs: Idog[]) {
  return dogs.map((dog) => {
      let displayCard = Object.assign({}, this.dogDisplayCard);

      find(displayCard.body, { id: "cardHeader" }).items[0].text = dog.name;
      find(displayCard.body, { id: "cardBody" }).items[0].text = dog.summary;
      find(displayCard.body, {
        id: "cardBody",
      }).items[1].columns[0].items[0].url = dog.imageLink;
      find(displayCard.body, { id: "cardBody" }).items[2].text = dog.imageAlt;
      displayCard.actions[0].url = dog.wikiLink;
      let adaptiveCard = CardFactory.adaptiveCard(displayCard);

      let preview = Object.assign({}, this.dogPreviewCard);

      preview.content.title = dog.name;
      preview.content.text = dog.imageAlt;
      preview.content.images[0].url = dog.imageLink;

      return { ...adaptiveCard, preview };
    });
  }

dogPreview.json:

{
"contentType": "application/vnd.microsoft.card.thumbnail",
"content": {
  "title": "",
  "text": "",
  "images": [
    {
      "url": ""
    }
  ]
}
}

Answer 1

您需要像这样创建对象的深层副本

...
let displayCard = JSON.parse(JSON.stringify(this.dogDisplayCard));
...
let preview = JSON.parse(JSON.stringify(this.dogPreviewCard));
...

否则，您将用后面的行改变原始对象。 { ...adaptiveCard, preview } 将包含对原始对象的引用，因此将在原始对象更新时进行更新。因此，您必须确保您使用的是对象的新副本，该副本没有任何对原始对象的引用。

JavaScript array.map 总是返回最后一项

JavaScript array.map always returning the last item

javascript

array-map

typescript