如何根据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访问密钥。

代码：

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