Javascript 如何根据SectionList中的键填充ui上的数组值

在我的代码中，我得到的是低于数组值的值，并根据SectionList中的键填充这些值。在UI中，所有的键值都是正确的，但在我的renderitem中，我面临一些问题。在下面的第二节中，我已经解释了更多。基本上在渲染函数中，我也想传递键值

//下面是数组值

 customerSearch:[
                    {
                      "key": "Customer",
                      "data": [
                        {
                          "name": "John",
                          "status": "Active",
                          "nationalId": "NBGVH6676",
                          "flag": "cus",
                        },
                        { "name": "Abhi",
                          "status": "Active",
                          "nationalId": "NBGVH6890",
                          "flag": "cus"
                        }
                      ]
                    },
                    {
                      "key": "Requests",
                      "data": [
                        {
                          "name": "Request 1",
                          "status": "Active",
                          "nationalId": "K0089"
                        },
                        { "name": "Request 2",
                          "status": "Active",
                          "nationalId": "AS420"

                        }
                      ]
                    },
                    {
                      "key": "Invoice",
                      "data": [
                        {
                          "name": "Invoice No 1",
                          "status": "Active",
                          "nationalId": "IN998"
                        },
                        { "name": "Invoice No 2",
                          "status": "Active",
                          "nationalId": "ABh007"

                        }
                      ]
                    },
                  ]

//在这里，我将填充特定密钥中的数据 在我的例子中，我得到了键值中的数组。虽然我必须在“客户”键中添加一些条件，但我必须显示虚拟形象。但这里的关键值是非关键值。 请帮忙

renderItems = ({ item }) => (
        <View>
      {key==='Customer' ?

        <View style={{ flex: 1, flexDirection: 'row', margin: 10,padding:5}}>
            <Avatar avatarSize={50}
                name={item.name}
                isTouchable={false} />
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
                <Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
                    {item.name}
                </Text>
                <Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 10 }}>
                    National Id : {item.id}
                </Text>
                {
                    item.status === 'Active' ?
                        <View style={{
                            flex: 1,
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                            width: 100,
                            paddingLeft:5
                        }}>
                            <View style={{
                                padding: 5,
                                backgroundColor: '#2CAC40',
                                borderRadius: 20,
                                height: 10,
                                width: 10,
                                marginTop: 4,
                                marginRight: 4,
                            }} />
                            <Text note
                                style={{ flex: 1, color: '#2CAC40', fontSize: hp('2.3%'), justifyContent: 'center' }}>
                                {item.status}
                            </Text>
                        </View> :
                        <View style={{
                            flex: 1,
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                            width: 100,
                        }}>
                            <View style={{
                                padding: 5,
                                backgroundColor: '#CC2828',
                                borderRadius: 20,
                                height: 10,
                                width: 10,
                                marginTop: 4,
                                marginRight: 4
                            }} />
                            <Text note style={{ flex: 1, color: '#CC2828', fontSize: hp('2.2%') }}>
                                {item.status}
                            </Text>
                        </View>
                }
            </View>
        </View>:

        <View style={{ flex: 1, flexDirection: 'row', margin: 5,padding:5}}>
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
                <Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
                    {item.name}
                </Text>
                <Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 5,paddingBottom:10 }}>
                    National Id : {item.nationId}
                </Text>
                <View style={{ width: '100%', height: '.5%', backgroundColor: 'black' }}></View>

            </View>
        </View>}
        </View>
    )

renderItems=（{item}）=>(
{key===='Customer'？
{item.name}
国民身份证：{item.Id}
{
item.status===“活动”吗？
{item.status}
:
{item.status}
}
:
{item.name}
国家Id:{item.nationId}
}
)

//下面是渲染函数中的代码

   <View style={{ marginLeft: 5, marginRight: 5, marginTop: 5, backgroundColor: '#fff' }}>

                        <SafeAreaView style={{ flex: 1, marginTop: 20 }}>
                            <SectionList
                                sections={globalSearchData}
                                keyExtractor={(item, index) => item + index}
                                renderSectionHeader={({ section }) => (
                                <RegularText text={`${section.key}`}  textColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureHeadingColor : null} style={{ fontSize: hp('2.5%') ,paddingLeft:15}}/>
                                )}
                                renderItem={this.renderItems}

                            />
                        </SafeAreaView>

                    </View>



Example UI display
Customer
Name
Status
National ID
Name Status
National ID

Request
Name Status
National ID
Name Status
National ID

项目+索引}
renderSectionHeader={（{section}）=>(
)}
renderItem={this.renderItems}
/>
示例用户界面显示
顾客
名称
地位
国民身份证
姓名状态
国民身份证
要求
姓名状态
国民身份证
姓名状态
国民身份证

---

感谢在您的

renderItems

方法中，您还需要对

部分进行解构。然后，您可以使用
部分访问密钥。密钥

代码：

renderItems = ({ item, section }) => (
   const key = section.key;
   // other Code ...
); 

谢谢@提姆。现在我想让所有的钥匙都值卡，现在如果我在使用卡，那么所有的零件都会在不同的卡中出现，而我必须显示在。。比如，如果客户密钥的所有值都在一张卡中，并且请求的所有值都是2，那么它应该在一张卡中，比如all@AbhigyanGaurav请问一个新问题。如果你有新问题，请随时通知我。这是一个新的任务，在我的渲染器中，我正在填充iteam的值，就像关键客户有两个对象一样，在一张卡中，这些值应该在关键请求中再次出现2个对象，这2个对象应该在一张卡中出现。请在我的代码中输入ALOK