我试图在我的React网站中使用Redux状态存储初始化一个选择框 . 状态存储包含可用选项列表和表示当前所选选项的值 .
当更改选择框时,我希望它向Redux商店发出一个动作事件,告诉它根据选择的内容执行一些工作 .
但是,当我尝试更改UI中的选择组合框时,它会给出错误
TypeError:无法读取未定义的属性'props'./src/GroupingSelector.tsx.GroupingSelector.onGroupingChange C:/src/GroupingSelector.tsx:32 29 | 30 | private onGroupingChange(e:any){31 | const = 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);
任何人都可以建议这有什么问题吗?
1 回答
你必须派遣一个功能 .
虽然您应该考虑使用和action.js文件并导入它 .
action.js
你的班