Estoy tratando de que una acción esté disponible dentro de una función que se llama dentro de array.map. Está pasando los accesorios del componente principal al subcomponente. Parece que debería ser una tarea sencilla hacer que esté disponible dentro de la función array.map, pero no ha tenido éxito.

Aquí hay un código de ejemplo actualizado:

En este ejemplo, poder pasar correctamente la función 'actionUpdate' a listItem es lo que no he logrado con éxito.

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

Tengo mi estado y acciones asignados a accesorios usando connect, mapStateToProps y mapDispatchToProps.

Lo que necesito lograr es tener acceso a la acción desde el envío dentro de la función listItem.

1
gditsch 9 oct. 2019 a las 23:27

1 respuesta

La mejor respuesta

Puede definir listItem dentro de MyList, lo que le proporcionaría acceso a los accesorios de MyList, incluida 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);
0
Greg Brodzik 9 oct. 2019 a las 21:33