Javascript 将变量传递给覆盖组件

我试图实现一个屏幕，其中我有多个项目，每个项目有一个-，+和添加到卡按钮。当我将按钮直接附加到项目上时，这可以正常工作。现在，我想实现一个覆盖（其中-、+和add to card按钮被放置在其中），当我按下此特定项的按钮时，会显示该覆盖。 我知道这不起作用，因为变量cartItemArray和item在overlay组件中未定义。我不知道如何将变量传递给覆盖组件

这是我的代码：

import React,{Component} from 'react';
import {View, Dimensions, Text, TouchableOpacity, StyleSheet,Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Transition,Transitioning} from "react-native-reanimated";
import {Overlay} from 'react-native-elements';

const transition = (
    <Transition.Together>
        <Transition.In type="fade" durationMs={200} />
        <Transition.Change/>
        <Transition.Out type="fade" durationMs={200}/>
    </Transition.Together>
);

export default class RestaurantMenu extends React.Component{

    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.state={
            cartItemsAmount: [],
            screenWidth: (Dimensions.get('window').width-10),
            expandOption: [],
            visible: false
        }
    }

    returnAmount=(amount)=>{
        if(typeof amount==='undefined'){
            return 0
        }else{
            return amount
        }
    };
    renderMenu = (menu)=>{
        return menu.map((item,index)=>{
            let cartItemArray=this.state.cartItemsAmount;
            let dishNumber = index + 1;
            return(
                <Transitioning.View
                    style={[styles.boxStyle,{width:this.state.screenWidth}]}
                    key={index}
                >
                    <Text style={{fontSize:20}}> {dishNumber} {item.name} {'\n\n'}   {item.price}0€ {'\n'}  </Text>
                    <TouchableOpacity
                    onPress={()=>{
                        this.setState(prevState=>({visible:!prevState.visible}));
                    }}
                    >
                        <Icon name="shopping-cart" size={20}/>
                    </TouchableOpacity>

                    <Overlay isVisible={this.state.visible}
                             fullScreen={false}
                             onBackdropPress={()=>{this.setState(prevState=>({visible:!prevState.visible}))}}
                             overlayStyle={{position:'absolute',width:'80%',height:'30%',borderRadius:4}}
                    >
                    <TouchableOpacity
                        onPress={()=>{
                            if(typeof cartItemArray[index]==='undefined'){
                                cartItemArray[index]=1;
                            }else{
                                cartItemArray[index]++;
                            };
                            this.setState({cartItemsAmount:cartItemArray});
                        }}
                        style={{position:'absolute',left:'60%',top:'55%'}}
                    >
                        <Icon name='plus' size={25}/>
                    </TouchableOpacity>

                    <Text
                        style={{fontSize:25,position:'absolute',left:'67%',top:'52%',fontWeight:'bold'}}
                    >
                        {this.returnAmount(cartItemArray[index])}
                    </Text>

                    <TouchableOpacity
                    onPress={()=>{
                        if(typeof cartItemArray[index]==='undefined'){
                            cartItemArray[index]=0;
                        }
                        if(cartItemArray[index]===0){
                            cartItemArray[index]=0;
                        }else{
                            cartItemArray[index]--
                        };
                        this.setState({cartItemAmount:cartItemArray});
                    }}
                    style={{position:'absolute',left:'75%',top:'55%'}}
                    >
                        <Icon name='minus' size={25}/>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={()=>{
                        if(cartItemArray[index]!==0){
                        this.props.onPress(item,index,item.name,item.id,cartItemArray[index]);
                        cartItemArray[index]=0;
                        this.setState({cartItemAmount:cartItemArray});
                        }
                    }}
                        style={{position:'absolute',left:'84%',top:'55%'}}

                    >
                        <Icon name='cart-plus' size={25}/>
                    </TouchableOpacity>
                    </Overlay>
                </Transitioning.View>
            )
        })
    };


    render(){
        return(
            <View>
                {this.renderMenu(this.props.menu)}
            </View>
        )
    }
}

import React，{Component}来自'React'；
从“react native”导入{视图、维度、文本、TouchableOpacity、样式表、按钮}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native reanimated”导入{Transition，Transitioning}；
从“react native elements”导入{Overlay}；
常量转换=(
);
导出默认类RestaurantMenu扩展React.Component{
建造师（道具）{
超级（道具）；
this.ref=React.createRef（）；
这个州={
cartItemsAmount:[]，
屏幕宽度：（Dimensions.get（'window'）。宽度-10），
扩展选项：[]，
可见：假
}
}
返回金额=（金额）=>{
如果（金额类型==='undefined'）{
返回0
}否则{
返还金额
}
};
renderMenu=（菜单）=>{
返回菜单.映射（（项目，索引）=>{
让cartItemArray=this.state.cartItemsAmount；
设数字=指数+1；
返回(
{dishNumber}{item.name}{'\n\n'}{item.price}0€{'\n'}
{
this.setState（prevState=>（{visible:！prevState.visible}））；
}}
>
{this.setState（prevState=>（{visible:！prevState.visible}））}
套印样式={{位置：'absolute'，宽度：'80%'，高度：'30%'，边界半径：4}}
>
{
if（cartItemArray[索引]的类型=='undefined'）{
cartItemArray[索引]=1；
}否则{
cartItemArray[索引]+；
};
this.setState（{cartItemsAmount:cartItemArray}）；
}}
样式={{位置：'absolute'，左：'60%'，顶：'55%}
>
{this.returnAmount（cartItemArray[index]）}
{
if（cartItemArray[索引]的类型=='undefined'）{
cartItemArray[索引]=0；
}
if（cartItemArray[索引]==0）{
cartItemArray[索引]=0；
}否则{
cartItemArray[索引]--
};
this.setState（{cartItemAmount:cartItemArray}）；
}}
样式={{位置：'absolute'，左：'75%'，顶部：'55%}
>
{
if（cartItemArray[索引]！==0）{
this.props.onPress（item、index、item.name、item.id、cartItemArray[index]）；
cartItemArray[索引]=0；
this.setState（{cartItemAmount:cartItemArray}）；
}
}}
样式={{位置：'absolute'，左：'84%'，顶：'55%}
>
)
})
};
render（）{
返回(
{this.renderMenu（this.props.menu）}
)
}
}

提前感谢您的建议