本文介绍了Nested Flat List Invariant Violation:VirtualizedList 包含一个单元，该单元本身包含多个 VirtualizedList的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
错误:不变违规:VirtualizedList 包含一个单元格，该单元格本身包含多个与父列表方向相同的 VirtualizedList.您必须将唯一的 listKey 属性传递给每个兄弟列表.
Error: Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.
所以我正在尝试制作一个具有多个嵌套 FlatList 的 FlatList 像这样..
So I am trying to make A FlatList which will have Multiple Nested FlatLists Like this..
1------FlaList Level 0
1.1-----FlatList Level 1
1.2-----FlatList Level 1
1.2.1------ FlatList Level 2
1.2.2------ FlatList Level 2
2------FlatList Level 0
2.1-----FlatList Level 1
2.2-----FlatList Level 1
2.2.1------ FlatList Level 2
2.2.2------ FlatList Level 2
代码片段:
{/* Flat List Level 0 ---------------------------------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={this.state.meeting_topic_list}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
{/* Nested Item Level 1---------------------------- */}
<FlatList
data={item.docs}
Horizontal={true}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested Item Level 1---------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={item.subItems}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
{/* Nested Item Level 2---------------------------- */}
<FlatList
data={item.docs}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested Item Level 2---------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={item.subItems}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
<FlatList
data={item.docs}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested FlatList end Level 2---------------------*/}
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested FlatList END Level 1---------------------*/}
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Flat List END Level 0 ---------------------------------------------------- */}
给出了父 FlatList 的数据示例.
Example of the Data The Parent FlatList is given.
var meetingTopicData = [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
],
subItems: [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
],
subItems: [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
},
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
},
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
}
]
}
]
},
];
你看，每一层都有两个 FlatList.如果我注释掉其中之一(没有子 FlatLists 的上面的那个.)代码运行没有任何错误.我认为这与兄弟 FlatLists 的 keyExtractors 有关.
You see, there are two FlatLists At Each Level. If I comment out one of them (The upper one with no Child FlatLists.) the Code runs without any error. I think it is something related to keyExtractors of sibling FlatLists.
推荐答案
请关注这个.我使用 lisKey 而不是 keyExtractor.这对我有用.
Please follow this. instead of keyExtractor i used lisKey.That works for me.
<FlatList
columnWrapperStyle={{margin: 5}}
data={this.state.productDetails.configurations}
numColumns={4}
listKey={(item, index) => 'D' + index.toString()}
renderItem={({item}) => (
<View style={styles.inputsContainer}>
<TouchableHighlight style={styles.fullWidthButton} onPress={() =>
this.selectProduct(item)}>
<Text style={styles.fullWidthButtonText}>{item.name}</Text>
</TouchableHighlight>
<FlatList
data={item.details}
listKey={(item2, index) => 'D' + index.toString()}
renderItem = {({item2}) => (
<View><Text>Hello</Text></View>
)}
/>
</View>
)}
/>
这篇关于Nested Flat List Invariant Violation:VirtualizedList 包含一个单元，该单元本身包含多个 VirtualizedList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！