Question

我遇到了TS2345。我们正在使用redux-form，打字稿和connect（redux）。

这是我们的容器组件。

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';
import SignForm from '@components/SignForm';
import * as AuthActions from '@store/auth/actions';

const selector =  formValueSelector('signForm');

const mapStateToProps = (state: any) => {
  const username = selector(state, 'username');
  const password = selector(state, 'password');
  return {
    signForm: {
      username,
      password,
    }
  }
}

function mapDispatchToProps(dispatch: any) {
  return {
    AuthActions: bindActionCreators(AuthActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SignForm);

这是演示组件。

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { Field, InjectedFormProps, reduxForm } from 'redux-form';
import * as Validator from '@utils/Validator'

export interface SignFormProps extends InjectedFormProps {
  AuthActions: any,
  signForm: any,
}

class SignForm extends Component<SignFormProps> {
  labels = {
    accountName: 'account name',
    password: 'password',
    signIn: 'signin',
  };

  handleSubmit = () => {
    this.props.AuthActions.loginRequested(
      this.props.signForm.username,
      this.props.signForm.password
    );
  }

  render() {

    return (
      <form>
        <div>
          <Field
            name="username"
            component={TextField}
            hinttext={this.labels.accountName}
            floatinglabeltext={this.labels.accountName}
            validate={[Validator.required]}
            ref="username"
          />
        </div>
        <div>
          <Field
            name="password"
            component={TextField}
            type="password"
            hinttext={this.labels.password}
            floatinglabeltext={this.labels.password}
            ref="pasword"
          />
        </div>
        <div style={this.styles.buttonStyle}>
          <Button type="button" onClick={() => this.handleSubmit()} >{this.labels.signIn}</Button>
          <Button type="button" onClick={() => this.handleReset()}>{this.labels.clear}</Button>
        </div>
      </form>
    );
  }
}

export default reduxForm<SignFormProps>({form: 'signForm'})(SignForm);

在avobe代码的最后，我们出现错误...

TS2345: Argument of type 'typeof SignForm' is not assignable to parameter of type 'ComponentType<InjectedFormProps<{}, {}, string>>'.
  Type 'typeof SignForm' is not assignable to type 'ComponentClass<InjectedFormProps<{}, {}, string>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'InjectedFormProps<{}, {}, string>' is missing the following properties from type 'Readonly<SignFormProps>': AuthActions, signForm

我们曾经将reduxForm函数放置在connect（）之前。当时确实有效。

将reduxForm（）放在connect（）之后，遇到此错误...

您知道如何解决吗？

如何用redux-form解决TS2345错误？

0 个答案: