Question

我在垂直flatlist内有一个水平flatlist，我希望根据要呈现的外部flatlist的项目来提供内部flatlist上的数据

这是我目前拥有的：

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

反应本地嵌套的平面列表（垂直平面列表内的水平平面列表）

1 个答案: