React native button внутри Card влияет на все остальные кнопки в отдельных картах из-за постоянного рендеринга - PullRequest
Новая
       27

React native button внутри Card влияет на все остальные кнопки в отдельных картах из-за постоянного рендеринга

0 голосов
/ 09 октября 2019

Я выполняю отдельные карты в моей функции рендеринга, используя данные из массива. Однако я хочу, чтобы кнопка на каждой Карте была нажата и влияла только на эту Карту. 

this.state = {
  isLiked: false,
  feed: [{
    username: ["stuff","here"],
    caption: ["more","stuff"]
  }]
}
toggleLike = () => {
  this.setState({
    isLiked = !this.state.isLiked
  })
}
renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if(card.caption[i])
          return (
            <View>
              <TouchableHighlight 
              onPress={()=>this.toggleModal({caption:card.caption[i],username:card.username[i]})}
              underlayColor="white">
                <Card
                key={`${i}_${index}`}
                containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
                  <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                    <View style={{ flexDirection: 'row'}}>
                  </View>
                    <View style={{flexDirection:'row'}}>
                      {this.state.isLiked ?(
                        <Avatar rounded icon={{name: 'heart-multiple-outline', type: 'material-community'}} overlayContainerStyle={{backgroundColor: '#ff4284',marginLeft: 5}} reverse size="small" onPress={()=> this.toggleLike()}/>
    ) : (
     <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
   overlayContainerStyle={{marginLeft:5}}
   reverse
   size='small'
   onPress={()=> this.toggleLike()}/>
)}
    </View>
  </View>
      <View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}} key={username}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}} key={card.caption}>{card.caption[i]}</Text>
</Card>
</TouchableHighlight>
        </View>
          );
        return <React.Fragment />;
      });
    })
}
render(){
  {this.renderFeed()}
}

Можно ли как-нибудь сделать так, чтобы кнопка на каждой карточке была независимой?

Вот примерная закуска, чтобы вы поняли, о чем я. https://snack.expo.io/@sooper_fly/demoforlikes

1 Ответ

1 голос
/ 09 октября 2019

Я строю выставочную закуску, Примерно так:

https://snack.expo.io/@djalik/demoforlikes

Вы можете улучшить свой код и сделать компонент карты / предмета и установить данные поверх реквизита. Рекомендую: работать с FlatList

...