使用打字稿,我如何使用reduxForm,connect和withRouter一起

时间:2019-07-01 18:37:30

标签: reactjs typescript redux

下面是我的组件。在添加withRouter()之前,它已经构建。

我得到的错误是:

Argument of type 'ConnectedComponentClass<any, Pick<{}, never>>' is not assignable to parameter of type 'ComponentType<InjectedFormProps<IFormProps, {}, string>>'.
  Type 'ConnectedComponentClass<any, Pick<{}, never>>' is not assignable to type 'ComponentClass<InjectedFormProps<IFormProps, {}, string>, any>'.
    Type 'Component<Pick<{}, never> | (Pick<Pick<{}, never>, never> & Partial<Pick<Pick<{}, never>, never>> & Partial<Pick<{}, never>>) | (Pick<Pick<{}, never>, never> & Pick<InferProps<...>, never>) | (Pick<...> & ... 1 more ... & Partial<...>), any, any>' is not assignable to type 'Component<InjectedFormProps<IFormProps, {}, string>, any, any>'.
      Type 'Pick<{}, never> | (Pick<Pick<{}, never>, never> & Partial<Pick<Pick<{}, never>, never>> & Partial<Pick<{}, never>>) | (Pick<Pick<{}, never>, never> & Pick<InferProps<{}>, never>) | (Pick<...> & ... 1 more ... & Partial<...>)' is not assignable to type 'InjectedFormProps<IFormProps, {}, string>'.
        Type 'Pick<{}, never>' is missing the following properties from type 'InjectedFormProps<IFormProps, {}, string>': anyTouched, array, asyncValidate, asyncValidating, and 23 more.  TS2345

     97 |   },
     98 |   enableReinitialize: true
  >  99 | })(connect<null, IMapDispatchToProps>(null, mapDispatchToProps)(withRouter(AddTodo)))
        |    ^
    100 | 
    101 | 

import * as React from 'react';
import { connect } from 'react-redux'
// import { IAllReducers } from '../store/index'
import { Button, Form, FormGroup } from 'reactstrap';
import { Field, reduxForm, InjectedFormProps  } from 'redux-form'
import {thunkAddTodo, thunkGetAllToDos} from '../store/reducerTodo'
import { withRouter } from "react-router";
import InputEmp from './FormElemnts/InputElm'
import DateElm from './FormElemnts/DateElm/DateElm';
// TODO: get redux form props?
export interface IAddTodoProps {
  // handleSubmit?: any,
  // pristine?: any,
  // reset?: any,
  // submitting?: any
  test?: any
  thunkAddTodo(value: IFormProps): Promise<any>
  thunkGetAllToDos(): Promise<any>
}

export interface IFormProps {
  message: String
  date: string
}

class AddTodo extends React.Component<InjectedFormProps<any> & IAddTodoProps> {
// class AddTodo extends React.Component<any> {
  submitForm = (value: IFormProps) => {
    console.log(value)
    this.props.thunkAddTodo(value).then(()  => {
      console.log('test')
      this.props.thunkGetAllToDos()
    }
    )
  }

  btnLinkClick = (e:React.FormEvent<EventTarget>) => {
    console.log('click', e)
    console.log('props', this.props)
  }

  public render() {
    const { handleSubmit, change } = this.props
    return (
      <div className="row">
        <div className="col">

          <Form onSubmit={handleSubmit(this.submitForm)}>
            <FormGroup>
              <Field
                name="message"
                component={InputEmp}
                type="text"
                placeholder="insert Messaxzge"
                labletxt="message"
              />
              <Field
                name="date"
                component={DateElm}
                placeholder="date"
                labletxt="DATE"
                change={change}
              />
              <Button outline color="primary" className="w-100 mt-1">add</Button>
              <Button onClick={this.btnLinkClick} type="button" outline color="primary" className="w-100 mt-1">Link to contact</Button>
            </FormGroup>
          </Form>
        </div>
      </div>
    );
  }
}

// interface IMapState2Props {
// }

interface IMapDispatchToProps {
  thunkAddTodo: any
  thunkGetAllToDos: any
}

// const mapState2Props = (state: IAllReducers) => {
//   return {
//   };
// }

const mapDispatchToProps = {
  thunkAddTodo,
  thunkGetAllToDos
}

export default reduxForm<IFormProps>({
  form: 'AddTodoForme',
  initialValues: {
    message: 'null',
    date: '01/01/01'
  },
  enableReinitialize: true
})(connect<null, IMapDispatchToProps>(null, mapDispatchToProps)(withRouter(AddTodo)))

0 个答案:

没有答案