SPFX - 使用 Graph API 响应限制属性窗格

Question

我正在尝试根据用户是否是 MS 组的成员来限制自定义 Web 部件属性窗格

现在我已经构建了图形 API 调用等......它只是返回 true 或 false。

在我的 API 请求中：-

public async checkMSGroup(){
  let groupName = "WebPartAdmin";
  return new Promise<void>((resolve: (ig: any) => any, reject: (error: any) => void): void => {
    this.context.msGraphClientFactory.getClient()
        .then((client: MSGraphClient): void => {
            client
            .api('/me/transitiveMemberOf')
            .get((error, response: any, rawResponse?: any) => {
                let msGroups = response.value;
                msGroups.forEach(   
                    (group) => {
                        //console.log(group.displayName);
                        if (group.displayName == groupName) {
                            resolve(true);
                        }
                    });
            })
        });
    }).then(resp => {return resp}); 
}

接下来我要在promise中得到响应

在我拥有的 PropertiesPane 配置中

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let webPartOptions: IPropertyPaneField<any>[];
    const ig:any = this.checkMSGroup()

    console.log(ig) // I can see the promise results

    

这是我要解决的问题

const [inGroup, setInGroup] = useState(false);
useEffect(() => {
        ig.then(resp => {
            setInGroup(resp);
            console.log("pp"+resp)
        })
    }, []);        
 console.log("var"+inGroup)

正如您在图像上看到的那样，我可以看到承诺，我在 useEffect 等方面收到错误... 任何建议都会很好，或者如果有另一种方法可以将 inGroup 设置为承诺结果。

剩下的很简单，我只需要 inGroup 变量为真

    if(inGroup==true){
                        webPartOptions = [
                            PropertyPaneTextField("title", {
                                label: "Title",
                                value: this.properties.title
                            }),
                           //Adds more property fields
                        }
                    }else{
                        webPartOptions = [
                            PropertyPaneLabel("title", {
                                text: "Contact Administrator"
                            })
                        ]
                    }
             
    return {
        pages: [
            {
                groups: [
                    {
                        groupFields: webPartOptions
                    }
                ]
            }
        ]
    };
}

Answer 1

WebPart 类本身不是 React 组件，这意味着您不能直接在 WebPart 类中使用任何 React 挂钩。如果您想等待您的方法，请在 onInit 方法中执行。它可能看起来像这样：

  protected inGroup: boolean;
  public async checkMSGroup() {
    let groupName = "WebPartAdmin";
    return new Promise<boolean>((resolve: (ig: any) => any, reject: (error: any) => void): void => {
      this.context.msGraphClientFactory.getClient()
        .then((client: MSGraphClient): void => {
          client
            .api('/me/transitiveMemberOf')
            .get((error, response: any, rawResponse?: any) => {
              let msGroups = response.value;
              msGroups.forEach(
                (group) => {
                  //console.log(group.displayName);
                  if (group.displayName == groupName) {
                    resolve(true);
                  }
                });
            })
        });
    }).then(resp => { return resp });
  }
  protected async onInit() {
    await super.onInit();
    this.inGroup = await this.checkMSGroup();
  }
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    if (this.inGroup) {
      return {
        pages: [
          {
            header: {
              description: strings.PropertyPaneDescription
            },
            groups: [
              {
                groupName: strings.BasicGroupName,
                groupFields: [
                  PropertyPaneTextField('description', {
                    label: strings.DescriptionFieldLabel
                  })
                ]
              }
            ]
          }
        ]
      };
    }
  }

希望有帮助