React Native 嵌套平面列表(垂直平面列表中的水平平面列表)

Question

我在垂直平面列表中有一个水平平面列表，我希望根据正在呈现外部平面列表的哪个项目来提供有关内部平面列表的数据

这是我目前拥有的：

<FlatList
style={styles.outerFlatlist}
data={this.state.catagories}
renderItem={({item, index})=>{
return (
<View>
<View>
<Text style={styles.catagoryName}>
{item.CategoryName}
</Text>
</View>
<View style={styles.innerFlatlist}>
<FlatList
horizontal={true} 
data={this.state.product1}
renderItem={({item, index})=>{
return (
<View 
style={styles.productsContainer}>
<View
style={styles.productImage}>
<Image 
source={{uri:item.productImage}}
style={styles.image}
resizeMode='contain'>
</Image>
</View>
<View style={styles.productDETAILS}>
<Text 
style={styles.productPrice}>R{item.productPrice}
</Text>
<Text 
style={styles.productDescription}> 
{item.productDecription}
</Text>
</View>
</View>
);
}}/>
</View>
</View>
);
}}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

使用上面的代码，除了每个类别显示相同的数据(this.state.product1(之外，一切运行良好，如何使内部平面列表的数据依赖于外部平面列表上的哪个项目显示？

Answer 1

当你在 .map 中时，你已经在 this.state.catagories 中，但由于您总是将 this.state.product1 用于 flatlist2，您将始终得到相同的结果，因为 this.state.product1保持不变。

在 flatlist2 将数据更改为item.products或item.whateveryouNeedHereButArray

<View style={styles.innerFlatlist}>
<FlatList
horizontal={true} 
data={item}