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

Posted 2023-02-22

【中文标题】无法在我的组件中调用 redux 操作

【英文标题】：Cannot call redux action in my component

【发布时间】：2018-11-24 23:07:12

【问题描述】：

我正在使用 react-native 学习 redux，我正在尝试使用“容器组件”模式中的操作。

我想在我的组件中调用一个 redux 操作，我正在使用 mapDispatchToProps 来执行此操作。

但是当组件调用动作时，我得到了著名的红屏

this.props.myDecrementor 不是函数

当我在我的组件中调试和console.log(this.props) 时，没有可用的操作或道具。

让我展示我的代码：

myContainer.js

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);

myComponent.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 > );
    

在容器中调用动作有效，但在组件中无效... 我读过这篇文章What is mapDispatchToProps?，但我真的不明白为什么它不起作用。

提前感谢您的帮助。

【参考方案1】：

您需要将 myDecrement() 函数作为道具从容器传递给 inputstep 组件。

在我的容器中添加

<InputStep myDecrementor = this.props.myDecrementor

【讨论】：

答案是正确的，但是构造函数不是必须的，没有它也一样。

我想知道：那么为什么 this.props.label 可用？谢谢你的精确！

因为你已经在 InputStep 中将 label 作为 props 传递了。 @Jobel 是对的，您不需要在 InputStep 中声明构造函数