我用反应本地学习redux而我试图在"容器组件"中使用动作。图案。
我想在我的组件中调用redux操作,并且我使用console.log(this.props)
来执行此操作。
但是当组件调用动作时,我会用
获得着名的红色屏幕this.props.myDecrementor不是函数
当我在我的组件中调试和import { connect } from "react-redux";
import { incrementStepCount, decrementStepCount } from "../actions";
class ChooseHour extends Component {
constructor(props) {
super(props);
this.addStep = this.addStep.bind(this);
this.removeStep = this.removeStep.bind(this);
}
addStep() {
this.props.myIncrementor();
}
removeStep() {
this.props.myDecrementor();
}
render() {
return ( <
View style = {
{
flex: 1
}
} >
<
Button onPress = {
this.addStep
}
style = {
styles.btnAddEtape
}
small transparent iconLeft >
<
Text > Add Step < /Text> <
/Button> <
InputStep key = {
1
}
label = "MyStep" / >
<
/View>
);
}
}
function mapStateToProps(state) {
return {
order: state.order
};
}
function mapDispatchToProps(dispatch) {
return {
myDecrementor: () => dispatch(decrementStepCount()),
myIncrementor: () => dispatch(incrementStepCount())
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ChooseHour);
时,没有可用的动作或道具。
让我展示我的代码:
myContainer.js
export default class InputStep extends Component {
decrementStepCountinComponent() {
this.props.myDecrementor();
}
render() {
return ( < Item style = {
styles.inputContainer
}
inlineLabel > < Label > {
this.props.label
} < /Label> <
Input style = {
styles.input
}
placeholder = "Step" / > < Icon name = "times"
type = "FontAwesome"
style = {
{
color: "red"
}
}
onPress = {
() => this.decrementStepCountinComponent()
}
/> < /
Item > );
}
}
myComponent.js
df= DataFrame(..)
with pd.option_context('display.max_rows', None, 'display.max_columns', df.shape[1]):
print(df)
调用容器中的操作,但不在组件中... 我已经阅读了这篇文章connector,但我真的不明白为什么它不起作用。
提前感谢您的帮助。
答案 0 :(得分:2)
你需要将myDecrement()函数传递给来自容器的inputstep组件作为props。
在myContainer中添加
<InputStep myDecrementor = {this.props.myDecrementor}