Javascript Redux mapDispatchToProps在array.map内的访问操作

我试图在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);

函数列表项（项，索引）{
const id=item.id
常数handleUpdated=e=>{
e、 预防默认值（）；
行动更新（id）；
};
返回(
更新
);
}
功能列表（道具）{
const{streams}=props；
返回(
{streams.map（listItem）}；
);
}
功能列表视图（道具）{
常量{classes，streams}=props；
返回(
);
}
常量mapStateToProps=状态=>{
const streams=R.path（['theObject'，'ArrayOfoObject']）
)（国家）；
返回{streams}；
};
const mapDispatchToProps=调度=>{
const actionUpdate=（itemId）=>{
返回调度（更新操作（itemId））；
};
返回{actionUpdate}；
};
const MainListView=connect(
MapStateTops，
mapDispatchToProps
)（列表视图）；
导出默认样式（样式）（MainListView）；

我使用connect、MapStateTrops和mapDispatchToProps将我的状态和动作映射到道具

---

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

您可以在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);

功能MyList（道具）{
const{streams，actionUpdate}=props；
//你可以在这里访问updateAction吗
常量列表项=（项，索引）=>{
const id=item.id
常数handleUpdated=e=>{
e、 预防默认值（）；
行动更新（id）；
};
返回(
更新
);
}
返回(
{streams.map（listItem）}；
);
}
功能列表视图（道具）{
常量{classes，streams}=props；
返回(
);
}
常量mapStateToProps=状态=>{
const streams=R.path（['theObject'，'ArrayOfoObject']）
)（国家）；
返回{streams}；
};
const mapDispatchToProps=调度=>{
const actionUpdate=（itemId）=>{
返回调度（更新操作（itemId））；
};
返回{actionUpdate}；
};
const MainListView=connect(
MapStateTops，
mapDispatchToProps
)（列表视图）；
导出默认样式（样式）（MainListView）；

您可以在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);

功能MyList（道具）{
const{streams，actionUpdate}=props；
//你可以在这里访问updateAction吗
常量列表项=（项，索引）=>{
const id=item.id
常数handleUpdated=e=>{
e、 预防默认值（）；
行动更新（id）；
};
返回(
更新
);
}
返回(
{streams.map（listItem）}；
);
}
功能列表视图（道具）{
常量{classes，streams}=props；
返回(
);
}
常量mapStateToProps=状态=>{
const streams=R.path（['theObject'，'ArrayOfoObject']）
)（国家）；
返回{streams}；
};
const mapDispatchToProps=调度=>{
const actionUpdate=（itemId）=>{
返回调度（更新操作（itemId））；
};
返回{actionUpdate}；
};
const MainListView=connect(
MapStateTops，
mapDispatchToProps
)（列表视图）；
导出默认样式（样式）（MainListView）；

如果没有一个最小的可复制示例，就很难看到您在做什么。。我想说，通过做

道具来尝试访问
listItem
。listItem

@MattOestreich我添加了一个更完整的示例你能使用CodeSandbox或StackBlitz之类的工具来创建一个可复制的示例吗？很难看出你想做什么。帮助我帮助你。如果没有一个最小的可复制的例子，你很难看到你在做什么。。我想说，通过做

道具来尝试访问
listItem
。listItem

@MattOestreich我添加了一个更完整的示例你能使用CodeSandbox或StackBlitz之类的工具来创建一个可复制的示例吗？很难看出你想做什么。帮助我帮助你。这是迄今为止最直截了当的答案，而且很有效。非常感谢。我希望把它们分开，因为这是一个非常大的MyList组件，但工作是最好的。这是迄今为止最直接的答案，也是最有效的。非常感谢。我希望将它们分开，因为这会产生一个非常大的MyList组件，但工作是最好的。