Question

父组件

const myParentComponent = ({ sourceValue, classes, doStuff }) => {
    return (
        <div>
            <MyComponent className={classes.iconWithText} value={sourceValue} onDoStuff={doStuff} />
        </div>
    );
}

const mapStateToProps = () => {
    ... 
}

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction())
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(myParentComponent));

使用

子组件

export default class MyComponent extends Component {
    handleClick = () => {
        console.info(this.props.value);

        this.props.onDoStuff(this.props.value);
    }

    render() {
        return (
            <SomeIcon className={this.props.className} onClick={this.handleClick} />
        );
    }
}

最终，被调用的动作本身只会执行log：

export function doStuff(value) {
    console.info('At doStuff action', value);
    return { type: DO_STUFF, value };
}

从技术上讲，一切似乎都有效，没有错误。但是，操作中的最后一个console.info将值记录为undefined。我很确定这是因为我像这样映射onClick动作：

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction())
    };
}

如果我提供这样的参数：

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction('123456'))
    };
}

然后doStuff操作记录123456值。

似乎从主组件传递给onDoStuff的sourceValue似乎没有任何效果。

我需要做些什么来确保传递原始的sourceValue？

Answer 1

您需要做的就是接受箭头功能中的参数并将其传递给

之类的动作

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (value) => dispatch(doStuffAction(value))
    };
}

如果您必须传递多个参数，可以像

一样编写

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (value, key) => dispatch(doStuffAction(value, key))
    };
}

如果您有多个参数因使用情况而异，例如，您希望将值传递给doStuffAction的某个组件，并且在某个组件中要传递value和key，那么首选将值设为像

这样的对象

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (obj) => dispatch(doStuffAction(obj))
    };
}

和行动：

export function doStuff({value, key}) {
    console.info('At doStuff action', value, key);
    return { type: DO_STUFF, value };
}

使用mapDispatchToProps映射的操作不带参数

1 个答案: