使用 SPFX 和 PNP/JS 获取特定列表项并在 SharePoint Online Webpart/Widget 中显示

Question

我想按 ID 读取特定列表元素的值并将其显示在 SharePoint 网站上。

问题是我尝试使用 PNP 框架，但某些组件不再工作。 到目前为止，这是我的代码。 我希望你能帮助我。

import * as React from 'react';
import styles from './Webpartprojectsw.module.scss';
import { IWebpartprojectswProps } from './IWebpartprojectswProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as jquery from 'jquery';
import { IItemAddResult, DateTimeFieldFormatType } from "@pnp/sp/presets/all";
import { spfi, SPFI, SPFx } from "@pnp/sp";
import "@pnp/sp/webs";
 import "@pnp/sp/lists";
import "@pnp/sp/items";

export interface ISolypProjectListItemsState{
    Title: string,
    ID: number,
    StartDate: string,
    EndDate:string,
    ProjectPhase: string,
    TrafficLight:string,
    message: string
  }

  export default class Webpartprojectsw extends     

 React.Component<IWebpartprojectswProps,ISolypProjectListItemsState> {

public static siteurl: string="";
public constructor(props:IWebpartprojectswProps, state: ISolypProjectListItemsState){
   super(props);
   this.state={
         Title:"",
         ID:0,
        StartDate:"",
        EndDate:"",
        ProjectPhase:"",
        TrafficLight:"",
        message:""
   };
   Webpartprojectsw.siteurl= this.props.websiteurl;
 }

 public componentDidMount()  {

    this._ReadItem();
 }



 public render(): React.ReactElement<IWebpartprojectswProps> {


  return (
   <div>
    {this.state.message}
    {this.state.Title}
   </div>      
      
  );
}
 private async _ReadItem(){
 // get a specific item by id
const item: any = await sp.web.lists.getByTitle("ProjectStatusList").items.getById(1).get();
console.log(item);
 this.setState({message:"Last Item Created Title:--> " + item.Title + item.TrafficLight});

  }
  }

非常感谢！

马蒂亚斯

Answer 1

使用 pnp js v.3 可能会很棘手，但这是我迄今为止所做的工作，它有所帮助。

首先创建一个服务层。例如让我们称之为 ItemsService.ts

import { spfi, SPFI, SPFx } from "@pnp/sp";

export class ItemsService{
  private _sp: SPFI;

  constructor(private context: WebPartContext) {
    this._sp = spfi().using(SPFx(this.context));
  }
}

在您的 IWebpartprojectswProps 中添加另一个属性为 context:WebPartContext。

在你要使用的 React 组件中，像这样实例化它...

import {ItemsService} from "../your/path/to/the/service/layer";

export interface ISolypProjectListItemsState{
    Title: string,
    ID: number,
    StartDate: string,
    EndDate:string,
    ProjectPhase: string,
    TrafficLight:string,
    message: string
  }

export default class Webpartprojectsw extends React.Component<IWebpartprojectswProps,ISolypProjectListItemsState> {

private itemService:ItemsService = null;

public constructor(props:IWebpartprojectswProps, state: ISolypProjectListItemsState){
   super(props);
   this.state={
         Title:"",
         ID:0,
        StartDate:"",
        EndDate:"",
        ProjectPhase:"",
        TrafficLight:"",
        message:""
   };
   itemService = new ItemsService(this.props.context)
   Webpartprojectsw.siteurl= this.props.websiteurl;
 }

}

在我继续之前，请记住，在您的 webparts 文件夹内的 spfx 解决方案中，有一个主 {yourProject}WebPart.ts 文件，其中包含了 WebPartContext。假设你想在你自己的类中使用上下文，那么你必须从那里注入它，因为它是魔法开始的地方。下面的例子会给你一个想法。

export default class YourProjectWebPart extends BaseClientSideWebPart<YourProjecWebPartProps> {

public render(): void {
    const element: React.ReactElement<IWebpartprojectswProps> =
      React.createElement(Webpartprojectsw , {
        context:this.context,
        //whatever other props you have to pass here
             
      });

    ReactDom.render(element, this.domElement);
  }


}

现在您可以使用您的服务了。让我们继续在 ItemsService.ts 文件中创建一个 getElement 函数。我找到了两种方法来获取更详细的项目以及获取元素数据的平均调用。

import { spfi, SPFI, SPFx } from "@pnp/sp";

export class ItemsService{
  private _sp: SPFI;

  constructor(private context: WebPartContext) {
    this._sp = spfi().using(SPFx(this.context));
  }

  //This is going to bring you many details of an element.
  public async getDetailedListElement(list:string, id:number){
    let singleItemQuery = `<View><Query>
      <Where>
         <Eq>
            <FieldRef Name='ID' />
            <Value Type='Counter'>${id}</Value>
         </Eq>
      </Where>
   </Query></View>`;
    let singleElement = await (
      await this._sp.web.lists
        .getByTitle(list)
        .renderListDataAsStream({ ViewXml: singleItemQuery })
    ).Row[0];
    return singleElement;
  }
  
  //This is going to bring you just the data that the pnp method is calling.
  public async getListElement(list:string, id:number){
    let singleElement = await this._sp.web.lists
      .getByTitle(list)
      .items.getById(id)();

     return singleElement;
  }

}

现在，如果你回到原来的类使用它，在你的私有异步 ReadItem 中，你会像这样使用它

private async _ReadItem(){
 // get a specific item by id
const item = await itemService.getSingleElement("ProjectStatusList",1);
 this.setState({message:"Last Item Created Title:--> " + item.Title + item.TrafficLight});

  }

尝试将您的 pnp 调用编码为服务层中的共享点，然后调用您想要调用的任何内容并将其呈现为您的需要。

还请仔细阅读 pnp.js Pnp.js v.3 transitionguidev.2 和 v.3 之间的转换文档

调试愉快！！！