javascript - TypeError：parentSubmit 不是函数

Question

嗨，我正在尝试将基于 redux-forms typescript 类的组件重构为钩子。

这是组件所在的位置（最终也将更改为钩子）：

import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';

interface StreamCreate {
  createStream: any;
}

class StreamCreate extends React.PureComponent<StreamCreate>  {

  onSubmit = (formValues: any) => {
    this.props.createStream(formValues);
  }

  render() {
    return (
      <div>
        <h3>Create a Stream</h3>
        <StreamFormEx parentSubmit={this.onSubmit}/>
      </div>
    )
  }
}

export default connect(null, { createStream })(StreamCreate);

这是我的基于类的表单组件，效果很好：StreamForm.tsx

import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';

export interface IUser {
  title: string;
  description: string;
}

export interface IDispatchProps {
  parentSubmit: any;
}


class StreamForm extends React.PureComponent<InjectedFormProps<IUser> & IDispatchProps> {

  onSubmitForm = (formValues: object) => {
    const { parentSubmit } = this.props;
    parentSubmit(formValues);
  }

  render() {
    const { pristine, submitting, handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.onSubmitForm)} className="ui__form">
        <div>
          <label>Enter Title </label>
          <Field
            id="title"
            name="title"
            component={Input}
            type="text"
            placeholder="Enter Title"
          />
        </div>
        <div>
          <label>Description </label>
          <Field
            id="description"
            name="description"
            component={Input}
            type="text"
            placeholder="Description"
          />
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>
            Submit
          </button>
        </div>
      </form>
    );
  }
}

export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
  form: 'streamForm',
  validate: Validation,
})(StreamForm);

这就是我尝试实现挂钩的方式：StreamForm.tsx

import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';

export interface IUser {
  title: string;
  description: string;
}

export interface IDispatchProps {
  parentSubmit: any;
}

export const onSubmitForm = (formValues: object, props: any) => {
  const { parentSubmit } = props;
  parentSubmit(formValues);
}

const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
  <form onSubmit={props.handleSubmit(onSubmitForm)}>
    <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.handleSubmit(onSubmitForm)}
            isDisabled={props.invalid}
          />
        </div>
      </div>
    </div>
   </form>
);
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
  form: 'streamForm',
  validate: Validation,
})(StreamForm);

这是我得到的错误：

×
TypeError: parentSubmit is not a function
onSubmitForm
src/components/streams/StreamForm/StreamFrom.tsx:19
  16 | 
  17 | export const onSubmitForm = (formValues: object, props: any) => {
  18 |   const { parentSubmit } = props;
> 19 |   parentSubmit(formValues);
  20 | }
  21 | 
  22 | const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (

有人可以向我解释为什么我的基于类的组件有效而我的钩子组件无效吗？

谢谢

标签： javascriptreactjstypescriptreact-hooksredux-form

Answer 1

我找到了一个解决方案：

组件的位置：

import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';

interface StreamCreate {
  createStream: any;
}


class StreamCreate extends React.PureComponent<StreamCreate>  {

  useOnSubmit = (formValues: any) => {
    this.props.createStream(formValues);
  }

  render() {
    return (
      <div>
        <h3>Create a Stream</h3>
        <StreamFormEx onSubmit={this.useOnSubmit}/>
      </div>
    )
  }
}

export default connect(null, { createStream })(StreamCreate);

这是钩子：StreamForm.tsx

import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field, formValues } from 'redux-form';
import '../formStyles.scss';

export interface IUser {
  title: string;
  description: string;
}

export interface IDispatchProps {
  onSubmit: object;
}

const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => {
  const { handleSubmit } = props;
  return (
   <form onSubmit={handleSubmit}>
    <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"
            type="Submit"
            isDisabled={props.invalid}
          />
        </div>
      </div>
    </div>
  </form>
  )
}

export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
  form: 'streamForm',
  validate: Validation,
})(StreamForm);

我通过阅读 redux-forms 文档找到了解决方案。