已部署的 Web 部件在控制台中显示错误，但对于非本地 workbench

Question

我已将 Web 部件部署到网站集（Web 部件设计用于的位置），但我在表单上遇到 3 个特定功能的错误。我正在为这些功能使用 sp.web。

我创建了一个使用此函数的 '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,

      }

部门列表下拉列表，其中填充了 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 });
  });
}

一个提交按钮。函数：

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 workbench 中完美运行，服务于它打算部署的实际站点。当作为包部署到站点本身并添加为 Web 部件时，它现在显示以下错误：

HTTP404：未找到 - 服务器未找到与请求的 URI（统一资源标识符）匹配的任何内容。（获取）GET - https://myDomain.sharepoint.com/sites/IncidentReporting/SitePages/_api/web/currentuser

HTTP404：未找到 - 服务器未找到与请求的 URI（统一资源标识符）匹配的任何内容。 (获取)GET - https://myDomain.sharepoint.com/sites/IncidentReporting/SitePages/_api/web/lists/getByTitle('Departments')/items

我在尝试提交时收到了类似的消息。 A我说了，这些都在非本地工作workbench。

其他详细信息：

如果我将 web 部件作为 web 部件添加到现代网站的主页，我会收到这些错误（与将 web 部件添加到页面时的错误不同）：

HTTP404：未找到 - 服务器未找到与请求的 URI（统一资源标识符）匹配的任何内容。 (获取)GET - https://MyDomain.sharepoint.com/sites/_api/web/lists/getByTitle('Departments')/items

HTTP404：未找到 - 服务器未找到与请求的 URI（统一资源标识符）匹配的任何内容。（获取）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 不是吗？

求助！

T

Answer 1

想通了......

确保输入：

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

从 "sp-pnp-js" 导入 pnp；

// ...

public onInit(): 承诺 {

return 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 从所需列表中获取数据。

已部署的 Web 部件在控制台中显示错误，但对于非本地 workbench

Deployed web part is showing errors in console but not for non-local workbench

sharepoint-online

spfx

sharepoint-rest-api