javascript - Egenskapen 'submitAction' saknas i typen '{}' men krävs i typen

Jag försöker lära mig Redux-formulär och TypeScript men jag har stött på ett fel som jag inte kan lösa.

Felet är: Property 'submitAction' saknas i typen '{}' men krävs i typen 'Readonly>>'.ts(2741)

Här är där jag tror att felet är...

//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);

Felet visas här vid <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);

Tack

Svar #1

Din Form-komponent har en obligatorisk submitAction-prop. (som definierad i ditt IDispatchProps-interface.)

Skicka vilken funktion som helst med typen () => any till din <FormEx />-komponent och felet bör försvinna.

Till exempel:

<FormEx submitAction={console.log("submit")} />

Relaterade artiklar