时间戳

首页 > 解决方案 > 添加和更新功能在使用 SPfx PnP.js 编码的 SharePoint 在线列表中不起作用

sharepoint-online - 添加和更新功能在使用 SPfx PnP.js 编码的 SharePoint 在线列表中不起作用

问题描述

使用下面的 SPFx PnP.js 代码，我正在 SharePoint 在线列表中执行 CRUD 操作：

private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}

UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

在上面的代码中，AddItem()和UpdateItem()不起作用，但读取列表项和删除列表项正在起作用。我的意思是我无法将新记录添加到列表中并且更新也没有收到任何错误，收到成功的警报消息但它没有添加或更新项目。AddItem() 和 updateItem() 函数代码的任何问题....任何帮助将不胜感激。

更新

顺便说一句，我是全局管理员，虽然它添加和更新功能不起作用，但我没有收到任何错误。

单击添加按钮获取成功的警报消息但未添加时，附上截图：

在此处输入图像描述

完整的代码参考：

 import pnp from 'sp-pnp-js';
//import { default as pnp, ItemAddResult } from "sp-pnp-js";
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PnPspCrud.module.scss';
import * as strings from 'pnPspCrudStrings';
import { IPnPspCrudWebPartProps } from './IPnPspCrudWebPartProps';

        export interface ISPList {
      ID: string;
      EmployeeName: string;
      Experience: string;
      Location: string;
    } 

export default class PnPspCrudWebPart extends BaseClientSideWebPart<IPnPspCrudWebPartProps> {


private AddEventListeners() : void{
 document.getElementById('AddItem').addEventListener('click',()=>this.AddItem());
 document.getElementById('UpdateItem').addEventListener('click',()=>this.UpdateItem());
 document.getElementById('DeleteItem').addEventListener('click',()=>this.DeleteItem());
}

 private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

private _renderList(items: ISPList[]): void {
  let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
  html += `<th>EmployeeId</th><th>EmployeeName</th><th>Experience</th><th>Location</th>`;
  items.forEach((item: ISPList) => {
    html += `
         <tr>
        <td>${item.ID}</td>
        <td>${item.EmployeeName}</td>
        <td>${item.Experience}</td>
        <td>${item.Location}</td>
        </tr>
        `; 
  });
  html += `</table>`;
  const listContainer: Element = this.domElement.querySelector('#spGetListItems');
  listContainer.innerHTML = html;
}



  public render(): void {
    this.domElement.innerHTML = `

      <div class="parentContainer" style="background-color: lightgrey">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
      <span class="ms-font-xl ms-fontColor-white" style="font-size:28px">Welcome to SharePoint Framework Development using PnP JS Library</span>
      <p class="ms-font-l ms-fontColor-white" style="text-align: left">Demo : SharePoint List CRUD using PnP JS and SPFx</p>
   </div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Employee Details</div>

</div>
<div style="background-color: lightgrey" >
   <form >
      <br>
      <div data-role="header">
         <h3>Add SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeName"  placeholder="EmployeeName"    />
            <input id="Experience"  placeholder="Experience"  />
            <input id="Location"  placeholder="Location"    />
         </div>
         <div></br></div>
         <div >
            <button id="AddItem"  type="submit" >Add</button>
         </div>
      </div>
      <div data-role="header">
         <h3>Update/Delete SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeId"   placeholder="EmployeeId"  />
         </div>
         <div></br></div>
         <div >
            <button id="UpdateItem" type="submit" >Update</button>
            <button id="DeleteItem"  type="submit" >Delete</button>
         </div>
      </div>
   </form>
</div>
<br>
<div style="background-color: lightgrey" id="spGetListItems" />
</div>

   `;
this.getListData();
this.AddEventListeners();
  }


AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}
/* 
AddItem()
{  

  pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
    EmployeeName : document.getElementById('EmployeeName')["value"],
    Experience : document.getElementById('Experience')["value"],
    Location:document.getElementById('Location')["value"]
   })
.then(addResponse => {
    alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");
})
.catch(addError => alert("An error has occurred:" + JSON.stringify(addError)));

}
*/

/*
private AddItem():void
{
     pnp.sp.web.lists.getByTitle("EmployeeList").items.add({
      EmployeeName : document.getElementById('EmployeeName')["value"],
      Experience : document.getElementById('Experience')["value"],
      Location: document.getElementById('Location')["value"]
  })
  .then((iar: ItemAddResult) => {
      console.log(iar);
  })
  .catch((error:any) => {
      console.log("Error: ", error);
  });

}
*/


UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

笔记：

我指的是这个链接，其中提供了完整的代码。

https://www.sharepoint-journey.com/SharePoint-Framework-Development-Create-List-CRUD-WebPart-PnPJS.html

标签： sharepoint-onlinespfx

解决方案

当然你可以调用 alert 函数，因为 pnp/sp 中的 add/update/delete 函数是异步的！你可以试试：

pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    })
.then(addResponse => {
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");
})
.catch(addError => alert("An error has occurred:" + JSON.stringify(addError)));

我希望这会有所帮助，也许如果您在这里遇到错误，您可以更新您的帖子以更深入地研究问题！

问候

推荐阅读