使用 React 从 SharePoint Online 列表中获取项目“无法读取未定义的属性”答案

【问题标题】：Getting items from a SharePoint Online list with React "Cannot read properties of undefined"使用 React 从 SharePoint Online 列表中获取项目“无法读取未定义的属性”
【发布时间】：2022-08-09 23:50:59
【问题描述】：

我有一个在 SharePoint Online 中使用的 Web 部件，它给了我一个错误。它在底部呈现带有分页的项目列表。

我目前收到以下错误

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

它指向我的“componentDidMount”

console.log 输出是...

2 PagedLinks setState： 2 PagedLinks 项目： 2 PagedLinks 项目长度：0 2 PagedLinks setState 完成： 1 PagedLinks项目：[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象] 1 PagedLinks 项目长度：23

有任何想法吗？

谢谢磷

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

标签： reactjs typescript sharepoint sharepoint-online spfx

【解决方案1】：

当您使用“then”方法时，您将丢失“this”上下文。解决它的方法很少。我认为最简单的是使用 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) });
 }

希望这会有所帮助。

【讨论】：