typescript - 如何使用 redux-form 解决 TS2345 错误?
问题描述
我遇到过TS2345。我们正在使用 redux-form、typescript 和 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() 之前。当时确实奏效了。
在connect()之后放置reduxForm()后,遇到这个错误...
你知道如何解决这个问题吗?
解决方案
推荐阅读
- acumatica - Acumatica - 销售订单分配/解除分配
- javascript - 如何使用 Leaflet 发布矢量图层?
- file - 如何使用 Julia 语言对文件中的数据进行分组
- .net - 崩溃后重新启动 Dotnet 应用程序
- python - 在 SQLAlchemy 中使用多对多关系时如何使用 like() 进行查询?
- google-cloud-platform - 数据流:无法在不同位置读写:源:asia-south1,目标:us-central1"
- python - 为什么 BeautifulSoup 无法从页面源中抓取完整的脚本?
- angular - 如何为用户构建无缝的 UI 体验?
- powerbi - 如何编写 Maxx dax 函数以获取每组的最大值
- javascript - React - 更改日期格式