部署的 Web 部件在控制台中顯示錯誤，但非本地工作台顯示錯誤

Question

我已將 Web 部件部署到網站集（該 Web 部件設計用於其中），但我收到表單上 3 個特定功能的錯誤。 我將 sp.web 用於這些功能。

1. 我創建了一個使用此功能的“Hello User ”：

public _getUser() { 
    sp.web.currentUser.get().then((user) => {

      this.setState({
        CurrentUserTitle: user.Title,
        FullName: user.Title,
        CurrentUser: user.LoginName,
        CurrentUserID: user.Id,
        CurrentUserEmail: user.Email,

      }

2. 使用 SP 列表填充的部門列表下拉列表。

public _getDepartments() {
  sp.web.lists.getByTitle("Departments").items.get().then((items: any[]) => {
    let returnedDepts: IDropdownOption[] = items.map((item) => { return { key: item.Title, text: item.Title }; });
    this.setState({ DepartmentsList: returnedDepts });
  });
}

3. 一個提交按鈕。 功能：

private _onSubmit() {

      sp.web.lists.getByTitle('Data and Report Form').items.add({

        FullName: this.state.FullName,
        UniId: this.state.UniId,
        Email: this.state.UserEmail,
        Phone: this.state.PhoneNo,
        Department: this.state.SelectedDept,
        SubDepartment: this.state.SubDepartment,
        StartDate: this.state.StartDate,
        DiscoveryDate: this.state.DateOfDiscovery,
        Details: this.state.IncidentDetails,
        PersonalData: this.state.PersonalData

      }).then((iar: ItemAddResult) => {
        console.log(iar);
        let list = sp.web.lists.getByTitle('Data and Report Form');
        list.items.getById(iar.data.Id).update({
            Title: 'DIBR'+iar.data.Id, 
        });
        this.setState({
          JobRef: iar.data.Id,
        });
      });
    }

該表單在要部署的實際站點上提供的非本地 SharePoint 工作台中完美運行。 當作為包部署到站點本身並作為 Web 部件添加時，它現在顯示以下錯誤：

HTTP404：未找到 - 服務器未找到與請求的 URI（統一資源標識符）匹配的任何內容。 (Fetch)GET - https://myDomain.sharepoint.com/sites/IncidentReporting/SitePages/_api/web/currentuser

HTTP404：未找到 - 服務器未找到與請求的 URI（統一資源標識符）匹配的任何內容。 (Fetch)GET - https://myDomain.sharepoint.com/sites/IncidentReporting/SitePages/_api/web/lists/getByTitle ('Departments')/items

我在嘗試提交時收到類似的消息。 AI說，這些都是在非本地工作台上工作的。

額外細節：

如果我將 webpart 作為 web part 添加到現代網站的主頁，我會收到以下錯誤（與將 webpart 添加到頁面時的錯誤不同）：

HTTP404：未找到 - 服務器未找到與請求的 URI（統一資源標識符）匹配的任何內容。 (Fetch)GET -https://MyDomain.sharepoint.com/sites/_api/web/lists/getByTitle ('Departments')/items

HTTP404：未找到 - 服務器未找到與請求的 URI（統一資源標識符）匹配的任何內容。 (Fetch)GET - https://MyDomain.sharepoint.com/sites/_api/web/currentuser

如您所見，它在 URL 中缺少實際站點。 為什么會有差異？

有沒有人知道為什么它在部署時表現不同？ 如果我將 Web 部件放在網站集的不同區域，為什么會顯示不同的錯誤。

更新：我試圖使用這個：

import pnp from "sp-pnp-js";



public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    pnp.setup({
      spfxContext: this.context
    });

  });
}

但我不知道如何實現它，因為 onInit 是 Angular，不是嗎？

幫助！

噸

Answer 1

弄清楚了.....

確保放置：

https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework

從“sp-pnp-js”導入 pnp；

// ...

公共 onInit(): 承諾 {

返回 super.onInit().then(_ => {

pnp.setup({
  spfxContext: this.context
});

}); 在您的根 .ts 文件中！！！！！！

這讓我好幾天了！

Answer 2

出現此問題是因為 PnP JS API 未獲取 SharePoint 上下文。 它采用 SITEURL + '/SitePages' 來獲取上下文。 因此，您需要做的是在 props 文件中添加一個新的“siteUrl”屬性。

export interface IDemoWebPartProps{  
  description: string;  
  siteUrl: string;  
}  

然后在 Webpart.ts 文件中，使用此值初始化此屬性。

public render(): void {  
    const element: React.ReactElement<IDemoWebPartProps> = React.createElement(  
      Demo,  
      {  
        description: this.properties.description,  
        siteUrl: this.context.pageContext.web.absoluteUrl  
      }  
    );

最后，在 .tsx 文件中使用此屬性初始化 Web 參數。

let web = new Web(this.props.siteUrl);

並使用它從使用 pnp-js 的所需列表中獲取數據。