下面是我的组件。在添加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)))