如何使用SPFx结合React函数式组件实现SharePoint列表CRUD操作？

• 函数式组件与@pnp/sp初始化
  用React的useEffect替代类组件生命周期完成@pnp/sp上下文配置，确保仅初始化一次：

  import { sp } from "@pnp/sp";
  import { useEffect } from "react";
  
  const ListCRUDComponent = () => {
    useEffect(() => {
      sp.setup({
        sp: {
          baseUrl: window.location.origin + "/sites/your-target-site"
        }
      });
    }, []);
  
    // 后续CRUD逻辑
    return <div>列表CRUD操作区</div>;
  };
  

• 读取列表数据（Read）
  结合useState管理数据状态，通过异步函数获取列表项：

  import { useState } from "react";
  import { sp } from "@pnp/sp/webs";
  import { IItem } from "@pnp/sp/items";
  
  const ListCRUDComponent = () => {
    const [listItems, setListItems] = useState<IItem[]>([]);
  
    const fetchItems = async () => {
      const items = await sp.web.lists.getByTitle("YourListName").items.select("ID", "Title", "Description").get();
      setListItems(items);
    };
  
    useEffect(() => {
      fetchItems();
    }, []);
  
    return (
      <ul>
        {listItems.map(item => (
          <li key={item.ID}>
            <h3>{item.Title}</h3>
            <p>{item.Description}</p>
          </li>
        ))}
      </ul>
    );
  };
  

• 创建列表项（Create）
  实现表单提交逻辑，调用@pnp/sp的add方法完成创建：

  const handleAddItem = async (title: string, description: string) => {
    await sp.web.lists.getByTitle("YourListName").items.add({
      Title: title,
      Description: description
    });
    // 创建后重新拉取数据更新状态
    fetchItems();
  };
  
  // 配合表单使用示例
  // <input type="text" onChange={(e) => setNewTitle(e.target.value)} />
  // <button onClick={() => handleAddItem(newTitle, newDesc)}>添加</button>
  

• 更新列表项（Update）
  通过项ID定位后调用update方法修改字段：

  const handleUpdateItem = async (itemId: number, newTitle: string) => {
    await sp.web.lists.getByTitle("YourListName").items.getById(itemId).update({
      Title: newTitle
    });
    // 更新后重新拉取数据
    fetchItems();
  };
  

• 删除列表项（Delete）
  通过项ID调用delete方法移除条目：

  const handleDeleteItem = async (itemId: number) => {
    await sp.web.lists.getByTitle("YourListName").items.getById(itemId).delete();
    // 删除后重新拉取数据
    fetchItems();
  };
  

• 核心注意事项

  • 异步操作需用async/await处理，避免回调嵌套
  • 利用useEffect的依赖数组控制数据拉取时机，避免不必要的重复请求
  • 组件卸载前可在useEffect返回清理函数，中断未完成的请求（如需）

内容的提问来源于stack exchange，提问作者thedeepponkiya