array.map 中的 Redux mapDispatchToProps 访问操作

Question

我正在尝试在 array.map 中调用的函数中获取可用的操作。正在将道具从父组件传递到子组件。感觉在 array.map 函数中使其可用应该是一项简单的任务，但事实证明这并不成功。

这是一个更新的示例代码：

在这个例子中，能够正确地将 'actionUpdate' 函数传递给 listItem 是我没有成功完成的。

function listItem(item,index) {
    const id = item.id

    const handleUpdated = e => {
        e.preventDefault();
        actionUpdate(id);
    };
    return (
        <Button
            onClick={handleUpdated}
            color='primary'
            variant='contained'
            style={{ marginTop: '0.75rem' }}
        >
            Update
        </Button>

    );
}
function MyList(props) {
    const { streams } = props;

    return (
        <List>
            {streams.map(listItem)};
        </List>
    );
}

function listView(props) {
    const { classes, streams } = props;

    return (
        <div style={{ width: '100%' }}>
            <section className={classes.content}>
                <Grid container>
                    <Grid item style={{ width: '100%' }}>
                        <MyList
                            streams={streams}
                            actionUpdate={actionUpdate}
                        />
                    </Grid>
                </Grid>
            </section>
        </div>
    );
}

const mapStateToProps = state => {
    const streams = R.path(['theObject', 'arrayOfObjects'])
    )(state);
    return { streams };
};

const mapDispatchToProps = dispatch => {
    const actionUpdate = (itemId) => {
        return dispatch(theUpdateAction(itemId));
    };
    return { actionUpdate };
};

const MainListView = connect(
    mapStateToProps,
    mapDispatchToProps
)(listView);

export default withStyles(styles)(MainListView);

我使用 connect、mapStateToProps 和 mapDispatchToProps 将我的状态和操作映射到道具。

我需要实现的是从 listItem 函数中的调度访问操作。

Answer 1

您可以在 MyList 中定义 listItem，这将使其能够访问 MyList 的道具，包括 updateAction。

function MyList(props) {
    const { streams, actionUpdate } = props;

    // Can access updateAction here
    const listItem = (item,index) => {
        const id = item.id

        const handleUpdated = e => {
            e.preventDefault();
            actionUpdate(id);
        };
        return (
            <Button
                onClick={handleUpdated}
                color='primary'
                variant='contained'
               style={{ marginTop: '0.75rem' }}
            >
                Update
            </Button>
        );
       }

    return (
        <List>
            {streams.map(listItem)};
        </List>
    );
}

function listView(props) {
    const { classes, streams } = props;

    return (
        <div style={{ width: '100%' }}>
            <section className={classes.content}>
                <Grid container>
                    <Grid item style={{ width: '100%' }}>
                        <MyList
                            streams={streams}
                            actionUpdate={actionUpdate}
                        />
                    </Grid>
                </Grid>
            </section>
        </div>
    );
}

const mapStateToProps = state => {
    const streams = R.path(['theObject', 'arrayOfObjects'])
    )(state);
    return { streams };
};

const mapDispatchToProps = dispatch => {
    const actionUpdate = (itemId) => {
        return dispatch(theUpdateAction(itemId));
    };
    return { actionUpdate };
};

const MainListView = connect(
    mapStateToProps,
    mapDispatchToProps
)(listView);

export default withStyles(styles)(MainListView);