使用 React "Cannot read properties of undefined"从 SharePoint Online 列表中获取项目

Question

我有一个我在SharePoint Online中使用的web部件，它给了我一个错误。它在底部显示分页项列表。

我目前得到下面的错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setState')

指向我的组件didmount

console.log输出为…

2 PagedLinks setState:2 PagedLinks项目:2 . PagedLinks条目长度:02 PagedLinks setState完成:1 PagedLinks项目:对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象的对象,对象(对象)1 PagedLinks条目长度:23

任何想法?

谢谢P

import * as React from 'react';
import styles from './PagedLinks.module.scss';
import { IPagedLinksProps } from './IPagedLinksProps';
import { IPagedLinksState } from './IPagedLinksState';
import { escape } from '@microsoft/sp-lodash-subset';
import { ISPItem } from '../models/ISPItem';
import { Pagination } from "@pnp/spfx-controls-react/lib/pagination";
import pnp from "sp-pnp-js";
const pageSize: number = 5;
export default class PnPPagination extends React.Component<IPagedLinksProps, IPagedLinksState> {
constructor(props: IPagedLinksProps) {
super(props);
this.state = {
allItems: [],
paginatedItems: []
};
}
// public componentDidMount(): void {
//   const items: ISPItem[] = this.getSPListItems();
//   this.setState({ allItems: items, paginatedItems: items.slice(0, pageSize) });
// }
public async componentDidMount(): Promise<void> {
//const items: ISPItem[] = this.getSPListItems();
const items: ISPItem[] = [];
//var reacthandler = this;
pnp.sp.web.lists
//.getByTitle("theURLs")
.getByTitle("theURLs")
.items.select("Title","URL")
.get()
.then(function (data) {
for (var k in data) {
items.push({ title: data[k].Title, description: data[k].URL });
}
//reacthandler.setState({ items });
console.log('1 PagedLinks items:' + items);
console.log('1 PagedLinks items length:' + items.length);

this.setState({ allItems: items, paginatedItems: items.slice(0, pageSize) });

//return items;
});

console.log('2 PagedLinks setState:');
console.log('2 PagedLinks items:' + items);
console.log('2 PagedLinks items length:' + items.length);
this.setState({ allItems: items, paginatedItems: items.slice(0, pageSize) });
console.log('2 PagedLinks setState done:');
}

public render(): React.ReactElement<IPagedLinksProps> {
return (
<div className={styles.pagedLinks}>
<div className={styles.container}>
<div className={styles.row}>
{
this.state.paginatedItems.map((item) =>
<div>{item.title}</div>
)
}
<Pagination
currentPage={1}
totalPages={(this.state.allItems.length / pageSize) - 1}
onChange={(page) => this._getPage(page)}
limiter={3}

/>
</div>
</div>
</div>
);
}
private _getPage(page: number) {
// round a number up to the next largest integer.
const roundupPage = Math.ceil(page);
this.setState({
paginatedItems: this.state.allItems.slice(roundupPage * pageSize, (roundupPage * pageSize) + pageSize)
});
}
public getSPListItems(): ISPItem[] {
// const spItems: ISPItem[] = [
//   { title: "stove", description: "completely" },
//   { title: "rich", description: "know" },
//   { title: "composed", description: "explain" },
//   { title: "said", description: "simply" },
//   { title: "sum", description: "bear" },
//   { title: "bowl", description: "exclaimed" },
//   { title: "help", description: "drive" },

// ];
const spItems: ISPItem[] = [
{ title: "stove", description: "completely" }
];
pnp.sp.web.lists
//.getByTitle("theURLs")
.getByTitle("theURLs")
.items.select("Title","URL")
.get()
.then(function (data) {
for (var k in data) {
spItems.push({ title: data[k].Title, description: data[k].URL });
}
//reacthandler.setState({ items });
//console.log(items);
return spItems;
});
return spItems;
}
}

Answer 1

当你使用"then"你失去了"这个"上下文。没有什么办法可以绕开它。我认为最简单的是使用await关键字来处理异步调用

public async componentDidMount(): Promise<void> {
//const items: ISPItem[] = this.getSPListItems();
const items: ISPItem[] = [];
//var reacthandler = this;
const data = await pnp.sp.web.lists
//.getByTitle("theURLs")
.getByTitle("theURLs")
.items.select("Title","URL")
.get()
for (var k in data) {
items.push({ title: data[k].Title, description: data[k].URL });
}
//reacthandler.setState({ items });
console.log('1 PagedLinks items:' + items);
console.log('1 PagedLinks items length:' + items.length);

this.setState({ allItems: items, paginatedItems: items.slice(0, pageSize) });
}

希望对你有帮助。