如何将 SPFx React.js 中的类组件转换为功能组件并从 SharePoint 列表中获取值

Question

我用 pnp/js 框架和 React.js 在 SPFx 中编写了一个类组件。我需要将其转换为反应中的功能组件。我现在很难调用我的 SharePoint 列表。 我有一个 SharePoint DataProvider.ts 和一个 pnpConfig.ts

到目前为止，这是我的代码： SharePoint DataProvider.ts

import {getSP} from '../PNPConfig/pnpConfig';
import {SPFI} from "@pnp/sp";
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { IMedEvalListItem } from 
                   '../spFxReactFuncFragebogen/components/IMedEvalListItemDefinition';}



  export default class SharePointDataProvider{

     private _sp: SPFI;

   constructor(wpContext: WebPartContext){
      this._sp=getSP(wpContext);
    
}

public GetSPObject(): SPFI {
   return this._sp;
}

public GetLists = async (): Promise<IMedEvalListItem[]> => {
    try{
       const response: IMedEvalListItem[] =await 
        this._sp.web.lists.select("Title","Id").filter("Hidden eq false")();
       return response;
      }
      catch(e){
        return e;
      }
     }
     }

PNP 配置：

 import { WebPartContext } from "@microsoft/sp-webpart-base";

 import {spfi, SPFI, SPFx} from "@pnp/sp";
 import {LogLevel, PnPLogging} from "@pnp/logging";
 import "@pnp/sp/webs";
 import "@pnp/sp/lists";
 import "@pnp/sp/items";
  import "@pnp/sp/batching";


export const getSP= (context:WebPartContext): SPFI =>{
 return spfi().using(SPFx(context as 
  WebPartContext)).using(PnPLogging(LogLevel.Warning));
 };

我的功能组件：

 import * as React from 'react';
  //import styles from './SpFxReactFuncFragebogen.module.scss';
 import type { ISpFxReactFuncFragebogenProps } from './ISpFxReactFuncFragebogenProps';
 import { IMedEvalListItem } from './IMedEvalListItemDefinition';
 import SharePointDataProvider from '../../DataProvider/SharePointDataProvider';


    export default function 
SpFxReactFuncFragebogen(props:ISpFxReactFuncFragebogenProps):React.ReactElement<ISpFxReactFuncFragebogenProps> {



    const[medItems,setMedItems]=React.useState<[IMedEvalListItem]>();

 const spService= new SharePointDataProvider(this.context);



 React.useEffect(() => {
  fetchListItems();
  }, []);


const fetchListItems = async () => {
  try {
    const items = await spService.GetLists();
    setMedItems(items);
  } catch (error) {
    console.error('Error fetching list items:', error);
  }
};
  

return (
  <section>
      <div>
        {medItems}
           
      </div>
  </section>
  
);
}

我不确定我的错误在哪里。我需要知道是否可以像这样调用 SharePoint 以及如何获取 useState 变量中的值。

致以诚挚的问候

马蒂亚斯

Answer 1

查看这篇博客文章，其中展示了如何将 SPFx 类组件转换为功能组件。它包括使用 REST API 从 SharePoint 获取数据并将其呈现在 Web 部件中的示例。

如何将 React Hooks 与 SharePoint 框架 (SPFx) 结合使用

import * as React from 'react';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import styles from './SpFxReactHooks.module.scss';
import { ISpFxReactHooksProps } from './ISpFxReactHooksProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

const SpFxReactHooks: React.FC<ISpFxReactHooksProps> = (props) => {
  const {
    hasTeamsContext,
    userDisplayName,
    // update prop interface & add as input prop in web part (not shown)
    spHttpClient
  } = props;

  const [counter, setCounter] = useState<number>(1);
  const [evenOdd, setEvenOdd] = useState<string>('');
  const [siteLists, setSiteLists] = useState<string[]>([]);

  useEffect(() => {
    (async () => {
      // line wrapping added for readability
      const endpoint: string = `${currentSiteUrl}/_api/web/lists
                        ?$select=Title
                        &$filter=Hidden eq false
                        &$orderby=Title
                        &$top=10`;
      const rawResponse: SPHttpClientResponse = await spHttpClient.get(
                                   endpoint, SPHttpClient.configurations.v1);
      setSiteLists(
        (await rawResponse.json()).value.map((list: { Title: string }) => {
          return list.Title;
        })
      );
    })();
  }, []);

  useEffect(() => {
    setEvenOdd((counter % 2 === 0) ? 'even' : 'odd');
  }, [counter]);

  const onButtonClick = (): void => {
    setCounter(counter + 1);
  }

  return (
    <section className={`${styles.SpFxReactHooks} ${hasTeamsContext ? styles.teams : ''}`}>
      <div className={styles.welcome}>
        <h2>Well done, {escape(userDisplayName)}!</h2>
        <div>Counter: <strong>{counter}</strong> is <strong>{evenOdd}</strong></div>
        <button onClick={() => onButtonClick()}>+</button>
        <ul>
        {
          siteLists.map((list: string) => (
            <li>{list}</li>
          ))
        }
        </ul>
      </div>
    </section>
  );
}

export default SpFxReactHooks;