在 React Typescript 中遇到的 No 重载与此调用匹配的错误

Posted 2023-03-10

【中文标题】在 React Typescript 中遇到的 No 重载与此调用匹配的错误

【英文标题】：Faced error of No overload matches this call in React Typescript

【发布时间】：2020-04-06 13:44:55

【问题描述】：

我正在创建 React 项目并面对，我有一个表单组件，它有 onSubmit 事件，显示“没有重载匹配此调用”错误。这是代码：<StyledForm onSubmit=this.handleSave>children</StyledForm>。

这里的 onSubmit 显示错误 No重载匹配此调用。 重载 1 of 2, '(props: Pick & StyledComponentProps, context?: any): ReactElement ReactElement 组件)> |空） | (new (props: any) => 组件<...>)> |组件<...> | null'，给出了以下错误。 类型 '(authorizeRequired?: boolean | undefined) => void' 不可分配给类型 '(event: FormEvent) => any'。 参数“authorizeRequired”和“事件”的类型不兼容。 类型 'FormEvent' 不可分配给类型 'boolean |不明确的'。 类型“FormEvent”不可分配给类型“true”。重载 2 of 2, '(props: PropsWithChildren & StyledComponentProps>, context?: any): ReactElement ReactElement 组件<...>)> |空） | （新（道具： 任何) => 组件<...>)> |组件<...> | null'，给出了以下内容 错误。 类型 '(authorizeRequired?: boolean | undefined) => void' 不可分配给类型 '(event: FormEvent) => any'.ts(2769) StyledForm.tsx(25, 5)：预期类型来自属性 'onSubmit' 在这里声明的类型为 'IntrinsicAttributes & Pick & StyledComponentProps' StyledForm.tsx(25, 5)：预期类型来自属性 'onSubmit' 在这里声明的类型为 'IntrinsicAttributes & Pick & StyledComponentProps & 孩子？：反应节点； '

handleSave的代码：

handleSave = (authorizeRequired?: boolean) => 
        const  mode, isNewDataSource, form, saveHandler  = this.props;
        const data = mergeAll<any>([
            form.value,
            
                isNew: mode === DSFormMode.create,
                isNewDataSource,
            ,
        ]);

        saveHandler(data, authorizeRequired);
    ;

StyledForm 的代码：

interface Props extends WithStyles<typeof styles> 
    children: ReactNode;
    onSubmit?(event: FormEvent); // here it shows error of 'onSubmit', which lacks return-type annotation, implicitly has an 'any' return type

const StyledFormRoot = ( classes, children, onSubmit = identity : Props) => (
    <form className=classes.container onSubmit=onSubmit>
        children
    </form>
);
export const StyledForm = withStyles(styles)(StyledFormRoot);

如果有不清楚的地方请告诉我

【参考方案1】：

将界面上的 onSubmit 更改为(event: FormEvent<htmlFormElement>) 应该这样做

在 onSubmit 上使用ctrl + click，您可以查看预期返回的内容

我也总是在类型方面遇到麻烦：/