按下某个按钮时如何有条件地渲染多个平面列表答案

【问题标题】：how to conditional render multiple flatlist when some button is pressed按下某个按钮时如何有条件地渲染多个平面列表
【发布时间】：2020-12-15 07:21:26
【问题描述】：

当我单击按钮查看类似项目时，我希望呈现新的平面列表。

这是我的状态

constructor(props) {
    super(props);
    //initalise state 
    this.state = {
        list: [
          {id : "1" , title: "Apple iPhone 12 (64GB) - Black", discount: "Up to 30% off", tags: "T-Shirt Shirt & more", image : "https://images-na.ssl-images-amazon.com/images/I/71fVoqRC0wL._SL1500_.jpg"},
          {id : "2" , title: "Samsung Galaxy Note 20 (64 GB) - Black", discount: "Up to 20% off", tags: "Apple Oppo & more", image : "https://cdn.mos.cms.futurecdn.net/xQKbHiPEh9JAGoXbYx3iGc-768-80.png"},
          {id : "3" , title: "One Plus 8 (64GB)", discount: "Up to 50% off", tags: "HP Dell Acer & more", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU5sP3pFlNsBesrrVAefgqabDXAkRrI_2ZXA&usqp=CAU"},
          {id : "4" , title: "Apple iPhone 11 Pro", discount: "Up to 70% off", tags: "Sony JBL & more", image : "https://images.firstpost.com/wp-content/uploads/2019/09/iPhone-11_720.jpg"},
          {id : "5" , title: "Motorola Razor 2019", discount: "Up to 15% off", tags: "Sony LG & more ", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUT3Tfy4KDkY5HutpWsX3_WFsfS-iQlC4WFw&usqp=CAU"},
          {id : "6" , title: "MI POCO F1 (128GB)", discount: "Up to 25% off", tags:"Puma Reebok & more", image : "https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/o/poco_f1_1.png"},
        ],
        newList: [
          {id : "1" , title: "Apple iPhone 12 (64GB) - Black", discount: "Up to 30% off", tags: "T-Shirt Shirt & more", image : "https://www.gizbot.com/img/2019/08/samsung-galaxy-note-10-india-pricing-revealed-cheaper-than-contemporaries-1565245139.jpg"},
          {id : "2" , title: "Samsung Galaxy Note 20 (64 GB) - Black", discount: "Up to 20% off", tags: "Apple Oppo & more", image : "https://cdn.mos.cms.futurecdn.net/xQKbHiPEh9JAGoXbYx3iGc-768-80.png"},
          {id : "3" , title: "One Plus 8 (64GB)", discount: "Up to 50% off", tags: "HP Dell Acer & more", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU5sP3pFlNsBesrrVAefgqabDXAkRrI_2ZXA&usqp=CAU"},
          {id : "4" , title: "Apple iPhone 11 Pro", discount: "Up to 70% off", tags: "Sony JBL & more", image : "https://images.firstpost.com/wp-content/uploads/2019/09/iPhone-11_720.jpg"},
        ],
        clicked: false
    }
  }

视图类似按钮中调用的函数

 addSomeData = () => {
    this.setState({
      list: [newList],      // new element can be an object 
      clicked: true
    })
  }

渲染包含视图相似按钮的项目函数

renderItemsFunction = (itemData)=>{
    return (     
        <TouchableOpacity style={{flex:1}}
            /*onPress={
            ()=>{
                this.props.navigation.navigate("CategoriesProducts" , {title:itemData.item.title,});
            }
        } */
        >     
          <View style={styles.layout}>
            <Card>
              <CardItem cardBody>
                <Image source={{uri : itemData.item.image }} style={{height: 150, width: null, flex: 1, }}/>
              </CardItem>
              <CardItem>
                <Left>
                  <Body>
                    <View style={{height: 80, width: null, flex: 1, }}>
                      <Text numberOfLines={3} style={styles.titleStyle}>{itemData.item.title}</Text> 
                    </View>  
                    <View style={{ flex: 0.5}}>
                      <Text note style={styles.discountStyle}>
                        {itemData.item.discount}
                      </Text>
                      <TouchableOpacity onPress={() => this.addSomeData}>
                          <Text style={styles.SimilarItems}>View Similar</Text> 
                      </TouchableOpacity>
                    </View>  
                  </Body>
                </Left>
              </CardItem>
            </Card>
          </View>
        </TouchableOpacity>     
    )
 }

如何有条件地渲染两个平面列表。如果我单击类似的按钮视图，我想显示一个新的平面列表，否则其他平面列表。

render() {
    return (
      <SafeAreaView style={styles.rootView}>
          <View>
            <Navbar/> 
          </View>
          <View style={{marginTop:70}}> 
            <Text style={{fontWeight:'bold', marginLeft: 10}}>We've found 25 Products</Text>  
          </View>
          { (//how to render?) ? (

            <ScrollView>            
              <FlatList  data={this.state.newList} numColumns={2} 
              renderItem={this.renderItemsFunction} /> 
            </ScrollView>
          ):(
            <ScrollView>
            <FlatList  data={this.state.list} numColumns={2} 
            renderItem={this.renderItemsFunction} /> 
           </ScrollView>
          )
          }
      </SafeAreaView> 
     );
  }
}

我是 React Native 的新手，所以我很抱歉，我实际上需要一些方法来在按下按钮时呈现一个新的平面列表。

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

{this.state.clicked ? (

        <ScrollView>            
          <FlatList data={this.state.newList} numColumns={2} 
          renderItem ={this.renderItemsFunction} /> 
        </ScrollView>
      ):(
        <ScrollView>
        <FlatList data={this.state.list} numColumns={2} 
        renderItem ={this.renderItemsFunction} /> 
       </ScrollView>
      )
}

【讨论】：

点击“查看相似”按钮后检查“点击”值是否更改为真。您需要将按钮代码更改为 onPress={() => this.addSomeData()}
是的，我做对了所有事情，但没有添加 () 括号。谢谢。现在它的工作。

【解决方案2】：

这可能会有所帮助，请在最后一个 () 中使用大括号

  <TouchableOpacity onPress={() => this.addSomeData()}> // here
      <Text style={styles.SimilarItems}>View Similar</Text> 
  </TouchableOpacity>

或使用箭头方法，如

  <TouchableOpacity onPress={this.addSomeData}>
      <Text style={styles.SimilarItems}>View Similar</Text> 
  </TouchableOpacity>

对于有条件的渲染，你可以这样做

{ this.state.clicked ? (...) : (...) }

【讨论】：

是的，它现在可以正常工作了，我做的一切都是正确的，但没有添加 () 括号。谢谢
@AniketYadav 如果有帮助，请接受答案谢谢:-)