キャッチされない例外TypeError（約束で）：すでに私はこのエラーを得た

Question

をお読みください。エラーがスローされ

sp-webpart-workbench-assembly_en-us_b854c4b93cc10a271230fd4a9e7b2b9b.js:661 Uncaught (in promise) TypeError: Already read at t.e.json (sp-webpart-workbench-assembly_en-us_b854c4b93cc10a271230fd4a9e7b2b9b.js:661) at ListItemFactory.ts:81 at

コード行はここにある：

.then((response: SPHttpClientResponse): Promise<{ value: IAnnouncementListItem[] }> => { 
        return response.json(); 
       }) 

クラス全体は次のとおりです。

import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http"; 
import { IWebPartContext } from "@microsoft/sp-webpart-base"; 
import { IListItem} from "./models/IListItem"; 
import { IFactory } from "./IFactory"; 
import { INewsListItem } from "./models/INewsListItem"; 
import { IDirectoryListItem } from "./models/IDirectoryListItem"; 
import { IAnnouncementListItem } from "./models/IAnnouncementListItem"; 

export class ListItemFactory implements IFactory { 
    // private _listItems: IListItem[]; 
    public getItems(requester: SPHttpClient, siteUrl: string, listName: string): Promise<any[]> { 
     switch(listName) { 
      case "GenericList": 
       let items: IListItem[]; 
       // tslint:disable-next-line:max-line-length 
       return requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id,Modified,Created,Author/Title,Editor/Title&$expand=Author,Editor`, 
       SPHttpClient.configurations.v1, 
       { 
        headers: { 
         "Accept": "application/json;odata=nometadata", 
         "odata-version": "" 
        } 
       }) 
       .then((response: SPHttpClientResponse): Promise<{ value: IListItem[] }> => { 
        return response.json(); 
       }) 
       .then((json: { value: IListItem[] }) => { 
        console.log(JSON.stringify(json.value)); 
        return items=json.value.map((v,i)=>(
         { 
          // key: v.id, 
          id: v.Id, 
          title: v.Title, 
          created: v.Created, 
          createdby: v.Author.Title, 
          modified: v.Modified, 
          modifiedby: v.Editor.Title 
         } 
        )); 
       }); 
      case "News": 
       let newsitems: INewsListItem[]; 
       // tslint:disable-next-line:max-line-length 
       return requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id,Modified,Created,newsheader,newsbody,expiryDate,Author/Title,Editor/Title&$expand=Author,Editor`, 
       SPHttpClient.configurations.v1, 
       { 
        headers: { 
         "Accept": "application/json;odata=nometadata", 
         "odata-version": "" 
        } 
       }) 
       .then((response: SPHttpClientResponse): Promise<{ value: INewsListItem[] }> => { 
        return response.json(); 
       }) 
       .then((json: { value: INewsListItem[] }) => { 
        return newsitems=json.value.map((v,i)=>(
         { 
          id: v.Id, 
          title: v.Title, 
          created: v.Created, 
          createdby: v.Author.Title, 
          modified: v.Modified, 
          modifiedby: v.Editor.Title, 
          newsheader: v.newsheader, 
          newsbody: v.newsbody, 
          expiryDate: v.expiryDate 
         } 
        )); 
       }); 
      case "Announcements": 
       let announcementitems: IAnnouncementListItem[]; 
       return requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id,Modified,Created,announcementBody,expiryDate,Author/Title,Editor/Title&$expand=Author,Editor`, 
       SPHttpClient.configurations.v1, 
       { 
        headers: { 
         "Accept": "application/json;odata=nometadata", 
         "odata-version": "" 
        } 
       }) 
       .then((response: SPHttpClientResponse): Promise<{ value: IAnnouncementListItem[] }> => { 
        return response.json(); 
       }) 
       .then((json: { value: IAnnouncementListItem[] }) => { 
        return announcementitems=json.value.map((v,i)=>(
         { 
          id: v.Id, 
          title: v.Title, 
          created: v.Created, 
          createdby: v.Author.Title, 
          modified: v.Modified, 
          modifiedby: v.Editor.Title, 
          announcementBody: v.announcementBody, 
          expiryDate: v.expiryDate 
         } 
        )); 
       }); 
      case "Directory": 
       let directoryitems: IDirectoryListItem[]; 
       return requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id,Modified,Created,firstName,lastName,mobileNumber,internalNumber,Author/Title,Editor/Title&$expand=Author,Editor`, 
       SPHttpClient.configurations.v1, 
       { 
        headers: { 
         "Accept": "application/json;odata=nometadata", 
         "odata-version": "" 
        } 
       }) 
       .then((response: SPHttpClientResponse): Promise<{ value: IDirectoryListItem[] }> => { 
        return response.json(); 
       }) 
       .then((json: { value: IDirectoryListItem[] }) => { 
        return directoryitems=json.value.map((v,i)=>(
         { 
          id: v.Id, 
          title: v.Title, 
          created: v.Created, 
          createdby: v.Author.Title, 
          modified: v.Modified, 
          modifiedby: v.Editor.Title, 
          firstName: v.firstName, 
          lastName: v.lastName, 
          mobileNumber: v.mobileNumber, 
          internalNumber: v.internalNumber 
         } 
        )); 
       }); 
      default: 
       break; 
      } 
     } 
} 

ReactJSを持つSharepoint Webパーツで、ユーザーがプロパティペインからWebパーツが初めてレンダリングされたときにリストを選択することに注意してくださいデフォルトであるGenericListからデータを受け取り、アナウンスメントのような別のリストを選択することができます。ユーザーが別のリストを選択するとエラーが発生します。

ここでは何が欠けていますか？

Answer 1

break;を各ケースの最後に使用することを忘れないでください。代わりに、最初に到達した後ですべてのケースを実行します。

Answer 2

あなたはresponse.json()を2回呼び出しています。 fetch()では許可されていません。

応答の内容を知りたい場合は、text()を使用して、それが有効なjsonでない場合には、自分で読み込んで解析します。 （text()も一度しか使用できませんが、JSON.parse()が失敗した場合でも、なぜか分かります）。これはおそらくあなたの問題ではありません。レスポンス本文を2回読むだけで、それはfetch()のnonoです。あなたのコンソールでのJSで

再現：

fetch('/').then(rsp => { 
    rsp.json().then(console.log); // << invalid json, probably 
    rsp.json().then(console.log); // << already read 
}) 

（一つのエラーが「無効JSON」になりますが、それは関係ありませんです。）その他のエラーが「は既に読ま」されます。

理由の理由はあなたのライブラリにあります。 requester.getはおそらく応答を読み取るので、応答を読み取ることはできません。おそらくSPHttpClientResponseにはそれを読むための他のメソッド/プロパティがあります。