无法在我的组件中调用redux操作

时间:2018-06-15 05:59:22

标签: javascript react-native redux

我用反应本地学习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,但我真的不明白为什么它不起作用。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

你需要将myDecrement()函数传递给来自容器的inputstep组件作为props。

在myContainer中添加

<InputStep myDecrementor = {this.props.myDecrementor}