Redux mapDispatchToProps действие доступа в файле array.map

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

Вы можете определить listItem в MyList, который предоставит ему доступ к реквизитам 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);