javascript - 类型“{}”中缺少属性“submitAction”,但在类型中是必需的
问题描述
我正在尝试学习 redux 表单和打字稿,但我遇到了一个我无法解决的错误。
错误是:Property 'submitAction' is missing in type '{}' but required in type 'Readonly<IDispatchProps & Partial<ConfigProps<IUser, IDispatchProps, string>>>'.ts(2741)
这是我认为错误所在的地方......
//Form.tsx
import * as React from 'react';
import { Input } from "../FormInput/FormInput";
import { Button } from "../FormButton/FormButton"
import { Validation } from "./FormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import './formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
submitAction:() => any;
}
const Form = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
<div className="LoginFormWrapper">
<div className="bodyWrapper">
<Field
id="title"
name="title"
placeholder="Enter title"
type="text"
component={Input}
/>
<Field
id="description"
name="description"
placeholder="Enter description"
type="text"
component={Input}
/>
<div className="buttonWrapper">
<Button
text="Submit"
onClick={() => props.submitAction()}
isDisabled={props.invalid}
/>
</div>
</div>
</div>
);
export const FormEx = reduxForm<IUser, IDispatchProps>({
form: 'Form',
validate: Validation,
})(Form);
错误显示在此处<FormEx />
import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import { FormEx } from './Form/From';
interface StreamCreate {
createStream: any;
}
class StreamCreate extends React.Component<StreamCreate> {
render() {
return (
<div>
<h3>Create</h3>
<FormEx />
</div>
)
}
}
export default connect(null, { createStream })(StreamCreate);
谢谢
解决方案
您的Form
组件有一个必需的submitAction
道具。(如您的IDispatchProps
界面中定义的那样。)
将任何类型的函数传递() => any
给您的<FormEx />
组件,错误应该会消失。
例如:
<FormEx submitAction={console.log("submit")} />
推荐阅读
- javascript - 如何从 NodeJS 连接到 PostgreSQL
- laravel - Laravel - 从控制器中的多个字段计算最小值
- html - 在 mvc razor 上的 href 中解析错误“/@”
- php - 如果用户的时区使用 PHP 更改,如何处理存储在数据库中的用户数据
- docker - Kibana Docker“这可能需要几分钟”但从不启动
- arrays - 将数组存储在数据库 Wordpress 中
- javascript - Javascript - 将分隔文本拆分为列
- c# - c# "is" 与存储在变量中的类型比较 --
- android - 棒棒糖前的矢量可绘制崩溃
- xamarin - 如何在 ViewCellRenderer Xamarin.Forms 中获取按钮单击事件