JavaScript 數組。map 總是返回最后一項

Question

我有一個對象數組，對象如下所示：

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

我有這個 function：

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

現在，當我調用這個 function 時，傳遞一組 Dogs，讓我們說 [DogA, DogB, DogC, DogD]

    let att = this.processDog(dogs);

我期望根據需要返回一個處理過的狗的數組，但是返回的是一個由 4 個處理過的 DogD 類型的狗組成的數組。這意味着 DogD 正在隱藏返回數組中的所有其他狗。 我究竟做錯了什么？

完整代碼：

//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));
...

否則，您將使用以下幾行更改原始 object。 {...adaptiveCard, preview }將包含對原始 object 的引用，因此會在原始 object 出現時更新。 因此，您必須確保您使用的是 object 的新副本，該副本沒有對原始 object 的任何引用。