React读取SharePoint Online列表时出现Cannot read properties of undefined错误

错误原因分析 #

• Cannot read properties of undefined (reading 'setState')：then回调使用普通函数时，this指向不是React组件实例，导致无法调用setState方法。
• 先执行空数组的setState：PnP的列表数据请求是异步操作，组件挂载后会优先执行外部同步的setState，此时请求未返回，items为空数组。

具体修复步骤 #

1. 修正this指向：将then中的普通函数改为箭头函数，或使用async/await简化异步代码，确保this指向组件实例。
2. 移除冗余同步setState：仅在异步请求成功后更新状态，避免提前设置空数组导致的无效渲染。
3. 修复分页计算逻辑：
   • 总页数计算改为Math.ceil(this.state.allItems.length / pageSize)，确保页数准确。
   • 页码切换时的切片起始索引改为(page - 1) * pageSize，避免数据偏移。
4. 简化数据转换：用map直接转换PnP返回的数据，替代循环push的冗余写法。

修改后的完整代码 #

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: []
    };
    // 绑定分页方法的this指向，避免调用时丢失上下文
    this._getPage = this._getPage.bind(this);
  }

  public async componentDidMount(): Promise<void> {
    try {
      // 用await等待异步请求完成
      const data = await pnp.sp.web.lists
        .getByTitle("theURLs")
        .items.select("Title", "URL")
        .get();
      
      // 直接用map转换数据，简化逻辑
      const items: ISPItem[] = data.map(item => ({
        title: item.Title,
        description: item.URL
      }));

      console.log('PagedLinks items:', items);
      console.log('PagedLinks items length:', items.length);
      
      // 请求成功后更新状态
      this.setState({ 
        allItems: items, 
        paginatedItems: items.slice(0, pageSize) 
      });
    } catch (error) {
      console.error('获取列表数据失败:', error);
    }
  }

  public render(): React.ReactElement<IPagedLinksProps> {
    const totalPages = Math.ceil(this.state.allItems.length / pageSize);
    return (
      <div className={styles.pagedLinks}>
        <div className={styles.container}>
          <div className={styles.row}>
            {
              this.state.paginatedItems.map((item, index) =>
                <div key={index}>{escape(item.title)}</div>
              )
            }
            {totalPages > 0 && (
              <Pagination
                currentPage={1}
                totalPages={totalPages}
                onChange={this._getPage}
                limiter={3}
              />
            )}
          </div>
        </div>
      </div>
    );
  }

  private _getPage(page: number) {
    // 计算正确的起始/结束索引，适配页码从1开始的逻辑
    const startIndex = (page - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    
    this.setState({
      paginatedItems: this.state.allItems.slice(startIndex, endIndex)
    });
  }
}

关键修改说明 #

• 异步处理优化：用async/await替代then链式调用，代码更易读，同时避免this指向混乱。
• this绑定：在构造函数中绑定_getPage的this，确保分页切换时能正确调用setState。
• 数据处理简化：使用map直接转换列表数据，减少冗余代码。
• 分页逻辑修复：修正总页数和切片索引计算，避免数据显示错位。
• 异常处理：添加try/catch捕获请求异常，便于调试问题。
• 安全与规范：对列表标题使用escape防止XSS攻击，添加key属性消除React渲染警告。

内容的提问来源于stack exchange，提问作者Pete Whelan