Reactjs Microsoft图形操作未执行-SPFX Web部件

：）

我试图填充一个json对象，然后将其字符串化，这样我就可以将其作为sharepoint列表中的listitem发布（当然是graph），问题是，对象为空，我觉得在函数中绑定“this”有问题，因此在执行范围中“this”只是未定义（因为我试图访问我的props对象），但是我不知道如何在正确的执行范围内将正确的“this”绑定到我的函数

import * as React from 'react';
import * as strings from 'SignatureWpWebPartStrings';
import styles from './SignatureWp.module.scss';
import { ISignatureWpProps, ISignatureWpState, SharepointListItem} from './ISignatureWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Checkbox } from 'office-ui-fabric-react';
import { ServiceKey, ServiceScope } from "@microsoft/sp-core-library";
import { PageContext } from "@microsoft/sp-page-context";
import * as moment from 'moment';
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { ClientMode } from "./clientMode";
import { AadHttpClient, MSGraphClient } from "@microsoft/sp-http";
import { HTTP_REQUEST_TYPE } from '@azure/msal-browser/dist/utils/BrowserConstants';
import { PopupWindowPosition } from '@microsoft/sp-property-pane';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';


export interface IGraphConsumerProps {
  clientMode: ClientMode;
  context: WebPartContext;
}
export default class SignatureWp extends React.Component<ISignatureWpProps, ISignatureWpState> {
  constructor(props: ISignatureWpProps){
    super(props);
    this.state = {
      agree: false
    };
  }
  public render(): React.ReactElement<ISignatureWpProps> {

    const checkboxHandler = () => {
      this.setState({agree:!(this.state.agree)});
    };

      const displayUser = (): string => {
      this.props.context.msGraphClientFactory
      .getClient()
      .then((client: MSGraphClient): void=> {
        client         
          .api("/me")
          .get((error, user: MicrosoftGraph.User, rawResponse?: string) => { 
            if(error)
            {
              console.log("error in /me")
              console.log(error);
              return "error";
            }
            if(user)
            {
              console.log(user.displayName.toString());
              return user.displayName.toString();
            }
          });
        });
        return 'error';
      } 

      const listItemBuilder  = () : string => {
        let date = moment();
        let obj: string = JSON.stringify(
        {
          "fields": {
            "Title": displayUser(),
            "Date": date
          }
        });
        console.log("just executed listitembuild")
        console.log(obj);
        return obj;
      };

      const buttonHandler = async(obj: string)  => {
        this.props.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void => {
          client         
            .api("/sites/"+this.props.site+"/lists/"+this.props.list+"/items")
            .header('Content-Type','application/json')
            .version("v1.0")
            .post(obj, (err, res, success) => {
              if (err) {  
              console.log(err);                
              }                
              if (success) {
                console.log("success");
                console.log(res);
              }
            });
          });
          console.log("redirecting..")
          window.location.href = this.props.redirect;
      };
      return(
        <div className = {styles.App}>
          <div className = {styles.container}>
            <label htmlFor="agree">קראתי והבנתי את ההנחיות והמסמכים המצורפים, מאשר/ת קריאה</label>
            <input type = "Checkbox" id = "agree" onChange ={checkboxHandler}/>
          </div>
          <button disabled={!this.state.agree} className={styles.btn} onClick={() => buttonHandler.bind(this,listItemBuilder())}>
            להמשך תהליך השדרוג באתר פרטנר
          </button>
        </div>
      );
    }
}

import*as React from'React'；
从“SignatureWpWebPartStrings”导入*作为字符串；
从“/SignatureWp.module.scss”导入样式；
从“/ISignatureWpProps”导入{ISignatureWpState，SharepointListItem}；
从'@microsoft/sp lodash subset'导入{escape}；
从“office ui fabric react”导入{Checkbox}；
从“@microsoft/sp核心库”导入{ServiceKey，ServiceScope}”；
从“@microsoft/sp page context”导入{PageContext}”；
从“时刻”导入*作为时刻；
从“@microsoft/sp webpart base”导入{WebPartContext}”；
从“/ClientMode”导入{ClientMode}；
从“@microsoft/sp http”导入{AadHttpClient，MSGraphClient}；
从'@azure/msal browser/dist/utils/BrowserConstants'导入{HTTP_请求_类型}；
从“@microsoft/sp属性窗格”导入{PopupWindowPosition}；
从“@microsoft/microsoft图形类型”导入*作为MicrosoftGraph；
导出接口IGRPROPS{
clientMode:clientMode；
上下文：WebPartContext；
}
导出默认类SignatureWp扩展React.Component{
构造函数（道具：ISignatureWpProps）{
超级（道具）；
此.state={
同意：错
};
}
public render（）：React.ReactElement{
常量checkboxHandler=（）=>{
this.setState（{agree:！（this.state.agree）}）；
};
const displayUser=（）：字符串=>{
this.props.context.msGraphClientFactory
.getClient（）
。然后（（客户端：MSGraphClient）：void=>{
客户
.api（“/me”）
.get（（错误，用户：MicrosoftGraph.user，rawResponse？：字符串）=>{
如果（错误）
{
console.log（“在/me中出错”）
console.log（错误）；
返回“错误”；
}
如果（用户）
{
console.log（user.displayName.toString（））；
返回user.displayName.toString（）；
}
});
});
返回“错误”；
} 
常量listItemBuilder=（）：字符串=>{
让日期=时刻（）；
让obj:string=JSON.stringify(
{
“字段”：{
“标题”：displayUser（），
“日期”：日期
}
});
log（“刚刚执行的listitembuild”）
控制台日志（obj）；
返回obj；
};
常量buttonHandler=async（对象：字符串）=>{
this.props.context.msGraphClientFactory
.getClient（）
。然后（（客户端：MSGraphClient）：void=>{
客户
.api（“/sites/”+this.props.site+”/lists/“+this.props.list+”/items”）
.header（'Content-Type'，'application/json'）
.版本（“v1.0”）
.post（obj，（err，res，success）=>{
如果（错误）{
控制台日志（err）；
}                
如果（成功）{
控制台日志（“成功”）；
控制台日志（res）；
}
});
});
console.log（“重定向…”）
window.location.href=this.props.redirect；
};
返回(
קראתי והבנתי את ההנחיות והמסמכים המצורפים, מאשר/ת קריאה
buttonHandler.bind（这个，listItemBuilder（））}>
להמשך תהליך השדרוג באתר פרטנר
);
}
}

代码乱七八糟，我知道，一个熟悉react和literaly的typescript的新手，没有人对js足够了解，可以在工作中帮助我（基本上是老伙计，.net crew）

---

提前向任何有任何建议的人表示感谢

我现在没有时间调查，但您将某些方法标记为异步，但您正在使用“then”。它应该像在c#中一样。代替“x（）”。然后（XYZ）“让a=等待x（）”；XYZ“