连接 使用 React/Redux 选择组合框，不发送调度事件

Question

我正在尝试使用React网站中的Redux状态存储初始化一个选择框。状态存储包含可用选项的列表和表示当前所选选项的值。

当选择框发生更改时，我希望它向 Redux 存储触发一个操作事件，告诉它根据所选内容执行一些工作。

但是，当我尝试更改UI中的选择组合框时，它给出了错误

类型错误：无法读取未定义的属性"props" ./src/GroupingSelector.tsx.GroupingSelector.onGroupingChange C：/src/GroupingSelector.tsx：32 29 | 30 | 私人 onGroupingChange(e： any( { 31 | 常量 { 值 } = e.target;

32 | this.props.dispatch({ type： 'UPDATEGROUPING'， selectedOption： value }(; 33 | } 34 |} 35 |

我的班级

import * as React from 'react';
import { connect } from 'react-redux';
import './App.css';
import IAction from './interfaces/IAction';
interface IGroupingProps {
groupingOptions : string[],
selectedGroupingOption : string,
dispatch : any
}
class GroupingSelector extends React.Component<IGroupingProps, {}> {
public render() {
return (
<div className="Grouping-selector">
<div className="Horizontal-panel-right Grouping-search-combo">
<select onChange={this.onGroupingChange}>
{this.props.groupingOptions.map((name, index)=> 
<option key={index}>{name}</option>
)}
</select>
</div>
<div className="Content Horizontal-panel-right">
Group by
</div>            
</div>);
}
private onGroupingChange(e: any) {
const { value } = e.target;
const action: IAction<string> = {type: "UPDATEGROUPING", payload: value};
this.props.dispatch(() => action);
}    
}
function mapStateToProps(state: any) {
return {
groupingOptions: state.groupingOptions,
selectedGroupingOption: state.selectedGroupingOption,
};
}    
export default connect(mapStateToProps)(GroupingSelector);

谁能建议这有什么问题？

Answer 1

必须调度一个函数。

this.props.dispatch(() => { type: 'UPDATEGROUPING', selectedOption: value }); 

尽管您真的应该考虑拥有和操作.js文件并导入它。

操作.js

export const updateGrouping = (selectedOption) => {
type: 'UPDATEGROUPING', 
selectedOption
}

您的班级

this.props.dispatch(updateGrouping(value))