如何在React(TS)WebPart中将HTML输入写入SharePoint列表？

1. 确保PnP JS已正确初始化 #

SPFx WebPart中必须通过上下文初始化PnP对象，否则无法正常调用SharePoint API。在你的WebPart主文件（非Liste.tsx，而是对应WebPart.ts）的onInit方法中添加初始化代码：

import { sp } from '@pnp/sp/presets/all';

export default class YourWebPartName extends BaseClientSideWebPart<IYourWebPartProps> {
  protected async onInit(): Promise<void> {
    await super.onInit();
    // 初始化PnP，传入SPFx上下文
    sp.setup({
      spfxContext: this.context
    });
  }

  // ... 其他代码
}

2. 添加错误捕获，排查具体问题 #

当前代码未处理API调用错误，无法定位失败原因。修改addListItem方法，添加try/catch捕获并打印错误：

private async addListItem() {
  alert("Hello World");
  try {
    const result = await sp.web.lists.getByTitle('Test123').items.add({
      Vorname: "Hello"
    });
    console.log("项目添加成功:", result);
    alert("数据已成功写入列表");
  } catch (error) {
    console.error("添加项目失败:", error);
    alert(`写入失败：${JSON.stringify(error)}`);
  }
}

注意需将方法改为async，因为items.add()是异步方法，需要用await等待执行完成。

3. 确认列表字段的内部名称 #

确保Vorname是列表字段的内部名称，而非显示名称。若字段曾被重命名，内部名称可能与显示名称不一致：

• 进入列表设置 → 点击对应字段
• 查看浏览器地址栏，末尾Field=后的字符串即为内部名称（如Field=Vorname）

4. 验证权限 #

确认当前登录用户拥有向Test123列表添加项目的权限（至少需“编辑”权限），可尝试手动向列表添加项目验证权限是否正常。

5. 检查列表名称是否正确 #

确认Test123是列表的准确标题，注意名称大小写敏感。

内容的提问来源于stack exchange，提问作者LeberkäseWhatsappgruppe