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的props（包括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);

Redux mapDispatchToProps array.map中的访问操作

1 个答案: