Question

使用下面的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
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Answer 1

当然，您可以调用警报功能，因为pnp / sp中的添加/更新/删除功能是异步的！您可以尝试：

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)));

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

问候

Answer 2

代码没有问题。最佳做法应为mentioend @ j.Benda。似乎是许可问题。

Answer 3

在chorme网络控制台中打开（f12并进入网络）。它可能会给你确切的错误。网站网址未设置种类。我会尝试您的代码，让您知道。请尝试以下。从“ sp-pnp-js”导入{默认为pnp，ItemAddResult，Web}；

on button events set web url.
onclickevnet(){
 var NewISiteUrl = this.props.siteurl;
    var NewSiteUrl = NewISiteUrl.replace("/SitePages", "");
    console.log(NewSiteUrl);
    let webx = new Web(NewSiteUrl)


webx.lists.getByTitle('EmployeeList').items.add({    
 EmployeeName : document.getElementById('EmployeeName')["value"],
 Experience : document.getElementById('Experience')["value"],
 Location:document.getElementById('Location')["value"]
})
.then(addResponse => {
     //error
})
.catch(addError => alert("An error has occurred:" + JSON.stringify(addError)));
}

使用SPfx PnP.js编码在SharePoint联机列表中添加和更新功能不起作用

3 个答案: