类型错误:parentSubmit不是一个函数。


嗨,我正在尝试将一个基于redux-forms typescript类的组件重构为hooks。

这就是这个组件的位置(最终也会改成hooks)。

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>) => (

谁能给我解释一下为什么我的基于类的组件能用,而我的钩子组件不能用?

谢谢。

解决方案:

我找到了一个解决方案。

在组件的位置上。

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文档找到了一个解决方案。

给TA打赏
共{{data.count}}人
人已打赏
未分类

在spark scala中查找数组列中的元素的最好方法是什么?

2022-9-8 20:21:42

未分类

我能否在 CloudFormation 模板控制台中为非默认 VPC 选择安全组名称?

2022-9-8 20:32:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索