类型“Promise<void>”不可分配给类型“MouseEventHandler<HTMLButtonElement>”

Question

我正在尝试构建一个 spfx web 部件，在同一上下文中更新列表，\n该按钮触发一个函数，该函数从上下文中获取当前用户名和日期，构建一个 json，然后将其字符串化，然后构建一个图形请求并将其与一个事件放在一起onclick。

\n

我收到以下错误：

\n

\n

类型“Promise”不可分配给类型\n“MouseEventHandler”。类型 'Promise'\n 与签名 '(event:\nMouseEvent<HTMLButtonElement, MouseEvent>): void'.ts(2322)\nindex.d.ts(1449, 9): 预期类型来自属性 ' 不匹配onClick'\n这是在类型上声明的\n'DetailedHTMLProps<ButtonHTMLAttributes

\n

\n

签名WP.tsx：

\n

import * as React from 'react';\nimport * as strings from 'SignatureWpWebPartStrings';\nimport styles from './SignatureWp.module.scss';\nimport { ISignatureWpProps, ISignatureWpState, SharepointListItem} from './ISignatureWpProps';\nimport { escape } from '@microsoft/sp-lodash-subset';\nimport { Checkbox } from 'office-ui-fabric-react';\nimport { ServiceKey, ServiceScope } from "@microsoft/sp-core-library";\nimport { PageContext } from "@microsoft/sp-page-context";\nimport * as moment from 'moment';\nimport { WebPartContext } from "@microsoft/sp-webpart-base";\nimport { ClientMode } from "./clientMode";\nimport { AadHttpClient, MSGraphClient } from "@microsoft/sp-http";\nimport { HTTP_REQUEST_TYPE } from '@azure/msal-browser/dist/utils/BrowserConstants';\nimport { PopupWindowPosition } from '@microsoft/sp-property-pane';\n\nexport interface IGraphConsumerProps {\n  clientMode: ClientMode;\n  context: WebPartContext;\n}\nexport default class SignatureWp extends React.Component<ISignatureWpProps, ISignatureWpState> {\n  constructor(props: ISignatureWpProps)\n  {\n    super(props);\n    this.state = {\n      agree: false, \n    };\n  }   \n  public render(): React.ReactElement<ISignatureWpProps> {\n    const checkboxHandler = () => {\n      this.setState({agree:!(this.state.agree)});\n    };\n    const listItemBuilder  = async () : Promise<string>  => {\n      const obj: string = JSON.stringify(\n      {\n        "fields": {\n          'Name': () : void => {\n            this.props.context.msGraphClientFactory\n            .getClient()\n            .then((client: MSGraphClient): void => {\n              client         \n                .api("/me")\n                .get((error, response: any, rawResponse?: any) =>{ \n                  console.log(error);\n                });\n            });\n          },\n          'Date': moment().format("dd/mm/yyyy")\n        }\n      });\n      return obj;\n    };\n    const buttonHandler = async(obj: Promise<string>)  => {\n      this.props.context.msGraphClientFactory\n      .getClient()\n      .then((client: MSGraphClient): void => {\n        client         \n          .api("/sites/siteid/lists/Signatures")\n          .header('Content-Type','application/json')\n          .version("v1.0")\n          .post(obj, (err, res, success) => {\n            if (err) {  \n            console.log(err);                \n            }                \n            if (success) {\n              console.log("success");\n            }\n          });\n        });\n\n    }\n    return(\n      <div className = {styles.App}>\n        <div className = {styles.container}>\n          <label htmlFor="agree">\xd7\xa7\xd7\xa8\xd7\x90\xd7\xaa\xd7\x99 \xd7\x95\xd7\x94\xd7\x91\xd7\xa0\xd7\xaa\xd7\x99 \xd7\x90\xd7\xaa \xd7\x94\xd7\x94\xd7\xa0\xd7\x97\xd7\x99\xd7\x95\xd7\xaa \xd7\x95\xd7\x94\xd7\x9e\xd7\xa1\xd7\x9e\xd7\x9b\xd7\x99\xd7\x9d \xd7\x94\xd7\x9e\xd7\xa6\xd7\x95\xd7\xa8\xd7\xa4\xd7\x99\xd7\x9d, \xd7\x9e\xd7\x90\xd7\xa9\xd7\xa8/\xd7\xaa \xd7\xa7\xd7\xa8\xd7\x99\xd7\x90\xd7\x94</label>\n          <input type = "Checkbox" id = "agree" onChange ={checkboxHandler}/>\n        </div>\n        <button disabled={!this.state.agree} className={styles.btn} onClick={buttonHandler(listItemBuilder())}>\n          \xd7\x9c\xd7\x94\xd7\x9e\xd7\xa9\xd7\x9a \xd7\xaa\xd7\x94\xd7\x9c\xd7\x99\xd7\x9a \xd7\x94\xd7\xa9\xd7\x93\xd7\xa8\xd7\x95\xd7\x92 \xd7\x91\xd7\x90\xd7\xaa\xd7\xa8 \xd7\xa4\xd7\xa8\xd7\x98\xd7\xa0\xd7\xa8\n        </button>\n      </div>\n    );\n  }\n}\n

\n

Answer 1

首先，您必须传递函数本身而不是被调用的函数。

我暂时通过将“event”输入为“any”来解决此错误

onClick={(e:any) => buttonHandler(listItemBuilder())}

希望这能完成这项工作！