Javascript 使用mapDispatchToProps映射的操作不接受参数

父组件

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

从技术上讲，一切似乎都正常，没有错误。但是，操作中的最后一个console.info将值记录为

undefined

。我很确定这是因为我将onClick动作映射为：

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

如果我提供这样的参数：

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

然后doStuff操作记录该123456值

从主组件传递给

onDoStuff

的sourceValue似乎没有任何效果

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

---

您所需要做的就是在arrow函数中接受一个param，并将其传递给动作，如

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

如果你必须传递多个参数，你可以这样写

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

如果有多个参数随使用情况而变化，例如从一个组件传递值到

dostufaction

，在某些组件中传递

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

---

哇，我比我想象的更接近一个解决方案。。。我只是没想过要试试。我想，既然我基本上是在传递一个函数引用，那么当我传递它时，它会自动接受param，我猜不会…很高兴能提供帮助

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