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

Question

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

//下面是数组值

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

//渲染函数中的以下代码

   <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

谢谢

Answer 1

在您的 renderItems 方法中，您还需要解构 section 。然后您可以使用 section.key 访问 key 。

代码:

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