javascript - '(dispatch: Dispatch 类型的参数, ownProps: OwnProps) => DispatchProps' 不可分配给“DispatchProps”类型的参数
问题描述
我正在使用 redux 和 typescript 作为语言创建一个反应应用程序。我按照这篇文章的建议来创建类型mapStateToProps
和maptDispatchToProps
功能。这是我的容器:
import { connect } from 'react-redux'
import { AppState } from 'src/store';
import { changeFilter } from 'src/store/tasks/actions';
import { Dispatch } from 'redux';
import { VisibilityFilter } from 'src/store/tasks/types';
import * as React from 'react';
interface OwnProps {
filter: VisibilityFilter;
}
interface StateProps {
active: boolean
}
interface DispatchProps {
onClick: () => void
}
type Props = StateProps & DispatchProps & OwnProps
export const Filter: React.FC<Props> = props => {
const { active, onClick, children } = props;
return (
<button
onClick={onClick}
disabled={active}
style={{
marginLeft: "4px"
}}
>
{children}
</button>
);
};
const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => ({
active: ownProps.filter === state.tasksState.visibilityFilter
})
const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => ({
onClick: () => dispatch(changeFilter(ownProps.filter))
})
export default connect<StateProps,DispatchProps,OwnProps>(
mapStateToProps,
mapDispatchToProps
)(Filter)
但是我在connect
函数中出现以下错误mapDispatchToProps
:
'(dispatch: Dispatch, ownProps: OwnProps) => DispatchProps' 类型的参数不可分配给'DispatchProps' 类型的参数。类型 '(dispatch: Dispatch, ownProps: OwnProps) => DispatchProps' 中缺少属性 'onClick' 但在类型 'DispatchProps'.ts(2345) Filter.tsx(17, 5) 中是必需的:此处声明了'onClick'。Filter.tsx(49, 5):你的意思是调用这个表达式吗?
我的函数拒绝它的DispatchProps
类型有什么问题吗?connect
如果您需要知道这些是我正在使用的库:
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1"
},
"devDependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.13.4",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.4",
"@types/react-redux": "^7.0.6",
"typescript": "^3.4.3"
}
更新
如果我删除函数中的泛型类型,connect
那么错误就会在这里消失,它会推断出类型:
但是现在当我使用Filter
容器时,我不得不在定义中添加 onclick 属性:
解决方案
代替
const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => ({
onClick: () => dispatch(changeFilter(ownProps.filter))
})
做这个
//in the import section
import { bindActionCreators } from "redux";
const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => {
return bindActionCreators ({
changeFilter }),
dispatch
}
在mapDispatchToProps
您的情况下,返回一个包含 onClick 函数的对象,这不是它的预期行为
推荐阅读
- r - 调试模式后变量未出现在 RStudio 全局环境中
- javascript - 通过 javascript 显示的 SVG 绘图不显示
- c# - 当你获得一定的分数时,如何在 C# 中添加新的玩家生活?
- c# - 如何获取在不同 AppDomain 中加载的 ac# 程序集的内存基地址
- php - Moodle 错误:检测到数据库驱动程序问题
- kuzzle - Kuzzle:执行此操作的权限不足
- javascript - 过滤低值余额并隐藏空复选框
- geometry - 不能从空值创建匀称的几何图形
- python - 从 py 文件中使用 scrapy(不在命令行中)
- css - 如何将多个内联样式作为道具应用到组件?