Question

我有这个错误：

TypeError：无法读取属性＆＃39;然后＆＃39;未定义的

在FactoryMethod.readItemsAndSetStatus（FactoryMethod.tsx：140：6）在FactoryMethod.componentDidMount（FactoryMethod.tsx：77：10）

调试器在此方法中断（然后声明）：

 // read items using factory method pattern and sets state accordingly
  private readItemsAndSetStatus(): void {
    this.setState({
      status: "Loading all items..."
    });

    const factory: ListItemFactory = new ListItemFactory();
    factory.getItems(this.props.spHttpClient, this.props.siteUrl, this.props.listName)
    .then((items: IListItem[]) => {
      const keyPart: string = this.props.listName === "GenericList" ? "" : this.props.listName;
        // the explicit specification of the type argument `keyof {}` is bad and
        // it should not be required.
        this.setState<keyof {}>({
          status: `Successfully loaded ${items.length} items`,
          ["Details" + keyPart + "ListItemState"] : {
            items
          },
          columns: buildColumns(items)
        });
    });
  }

工厂代码是这样的：（GenericList案例）

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<IListItem[]> {
        switch(listName) {
            case "GenericList":
                let items: IListItem[];
                // tslint:disable-next-line:max-line-length
                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));
                    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                        
                    }));
                    return  items;
                  });
                break;    
            case "News":
                let newsitems: INewsListItem[];
                // tslint:disable-next-line:max-line-length
                requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id,Modified,Created,Created By,Modified By,newsheader,newsbody,expiryDate`,
                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 this._listItems = json.value;
                });
                break;    
            case "Announcements":
                let announcementitems: IAnnouncementListItem[];
                requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id`,
                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 this._listItems = json.value;
                });
                break;    
            case "Directory":
                let directoryitems: IDirectoryListItem[];
                requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Id`,
                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 this._listItems = json.value;
                });
                break;    
            default:
                return null;
        }
      }
}

我的Ilistiteminterface代码是

export  interface IListItem {
    [key: string]: any;
    id: string;
    title: string;
    modified: Date;
    created: Date;
    modifiedby: string;
    createdby: string;
}

从服务返回的json是：

[{
    "Author": {
      "Title": "Luis Valencia"
    },
    "Editor": {
      "Title": "Luis Valencia"
    },
    "Id": 1,
    "ID": 1,
    "Title": "Generic List Item 1",
    "Modified": "2017-10-23T20:02:22Z",
    "Created": "2017-10-23T20:02:22Z"
  },
  {
    "Author": {
      "Title": "Luis Valencia"
    },
    "Editor": {
      "Title": "Luis Valencia"
    },
    "Id": 2,
    "ID": 2,
    "Title": "Generic List Item 2",
    "Modified": "2017-11-07T17:52:34Z",
    "Created": "2017-11-07T17:52:34Z"
  }
]

调试时我注意到的是JSON映射显然不起作用。看截图，项目未定义

Answer 1

您没有从getItems返回请求者。在每个case语句中，在请求者之前添加一个return语句。

return requester.get(`${siteUrl}/_api/web/lists/getbytitle('${listName}') ...

.then是一个方法Promise和类似Promise的对象，并且由于getItems要么返回undefined（或者在默认情况下为null），它会抛出错误。

TypeError：无法读取属性＆＃39;然后＆＃39;在webservice上未定义

1 个答案: