如何使用 React 功能組件將數據添加到帶有 SPFx 的 SharePoint 列表？

Question

我使用Class組件創建了一個SPFx React解決方案，並使用 SharePoint 列表執行了 CRUD 操作。

我已將@pnp/sp用於 SharePoint API 調用。

現在，我需要在SPFx React解決方案中使用功能組件執行 CRUD 操作。

任何人都可以建議有用的鏈接嗎？

謝謝

Answer 1

在功能組件中也是如此。

import * as React from 'react';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { SPFI } from '@pnp/sp';

const SimpleFunctionComponent:React.FunctionComponent<{sp: SPFI}> = ({sp}) => {

    const [ items, setItems ] = React.useState<string[]>([]);

    React.useEffect(() => {

        const init = async () => {
            const items: any[] = await sp.web.lists.getByTitle("Test").items();
            setItems(items.map(i => i["Title"]));
        };

        if(sp) {
            init();
        }   
    }, [sp]);

    return <div>
        {
            items.map(i => <div>{i}</div>)
        }
    </div>
}

export { SimpleFunctionComponent }

您擁有 SPFI 屬性（您可以在 webpart.ts 文件中定義和初始化它）。 然后在組件本身中，您可以使用 useEffect 掛鈎來加載項目。 我在示例中使用的鈎子將在每次“sp”屬性發生變化時加載。 結果將如下所示：