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

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

最终，被调用的操作本身只会记录日志:

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 似乎没有任何效果。

What do I need to do to make sure the original sourceValue is passed?

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

和 Action :

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