react-native - 反应本地嵌套的平面列表（垂直平面列表内的水平平面列表）(React Native nested Flatlist (horizontal flatlist inside vertical flatlist))

Question

I have a horizontal flatlist inside a vertical flatlist and I want data on the inside flatlist to be provided based on which item of the outer flatlist is being rendered

(我在垂直平面清单中有一个水平平面清单，并且我希望根据正在呈现的外部平面清单中的项目来提供内部平面清单中的数据)

This is what I have currently:

(这是我目前拥有的：)

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

With the above code, everything works well except that each category displays the same data (this.state.product1), how can I make the data of the inner flatlist be dependant on the which item on the outer flatlist is displayed?

(使用上面的代码，除了每个类别显示相同的数据（this.state.product1）之外，其他所有东西都运行良好，如何使内部平面列表的数据依赖于外部平面列表上显示的项目？)

  ask by Proff Mushiana Mulweli translate from so

Answer 1

When you are inside the .map you already are inside the this.state.catagories , but since you always use this.state.product1 for the flatlist2 you will always get the same result because this.state.product1 stays the same.

(当您在.map中时，您已经在this.state.catagories中，但是由于您始终将flat.2使用this.state.product1，因此您始终会得到相同的结果，因为this.state.product1 保持不变。)

At flatlist2 change the data to item.products or item.whateverYouNeedHereButArray

(在flatlist2上，将数据更改为item.products或item.whateverYouNeedHereButArray)

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