web-dev-qa-db-fra.com

Réagir à l'item de la liste à plat

Utilisation de React Native et problèmes avec le composant FlatList. Ceci est ma FlatList.

    <FlatList
     data={this.state._data}
     renderItem={() => this.renderItem()}
     refreshControl={
       <RefreshControl
        onRefresh={() => this.handleRefresh}
        refreshing={this.state.refreshing}
       />
      }
    />

Ceci est ma fonction renderItem:

    renderItem({item, index}) {
     return (
      <View style={{marginTop: 10, marginHorizontal: 10, paddingLeft: 
         10}}>
        <ListItem
            roundAvatar
            title={`${item.itemName}`}
            subtitle={`${item.amount}`}
            avatar={require('../../../images/logo.png')}
        />
        <View
            style={{
                paddingBottom: 10,
                paddingTop: 10,
                display: 'flex',
                flexDirection: "row",
                justifyContent: "space-around",
                alignContent: "center"
            }}
         >
            <View style={{ flexDirection: "row", alignContent: 
                 "center", width:"45%"}}>
                <Button
                    block
                    small
                    // disabled={this.state.acceptButtonGray}
                    style=
                      {this.state.acceptButtonGray ? ({
                      backgroundColor: 'gray',
                      width: "100%"
                      }) : ({backgroundColor: "#369ecd",
                         width: "100%"
                      })}
                    onPress={() =>
                      this.setState({
                         modalVisible: true,
                         // acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
                         acceptOffer: true,
                          })
                      }
                      >
                    <Text>
                        Accept
                    </Text>
                </Button>
            </View>
        </View>
    </View>
   );
  }

this.setState dans le onPress dans le bouton doit rendre un modal visible et définir acceptOffer sur true. Le modal s'ouvre, l'utilisateur confirme son offre. Le bouton d'offre qui a ouvert ce modal doit maintenant être gris et, mieux, désactivé. 

En passant ma fonction RenderItem comme indiqué ci-dessus, je reçois 

    TypeError: Cannot read property 'item' of undefined.

Passer ma fonction RenderItem comme ceci:

    renderItem={this.renderItem}

Je reçois cette erreur:

    _this2.setState is not a function

Le composant FlatList est certainement responsable d'une partie de mon problème, ainsi que de la manière et du lieu où j'appelle this.setState. Mon post ne contient qu'un bouton, mais il y en a deux, un pour accepter, un pour refuser. Avoir deux modaux changerait-il quelque chose? 

FlatList affiche facilement mes composants ListItem jusqu'à ce que j'essaie d'appeler this.setState dans les boutons de la vue contenant ces ListItems. 

Le bouton de fermeture modale prend this.state.acceptOffer et, si true, définit this.state.acceptButtonGray sur true, cette logique devrait-elle être ailleurs?

Existe-t-il un autre moyen d'ouvrir un modal et de changer la couleur du bouton sans utiliser l'état du composant? Est-ce que vous voulez que ces boutons se trouvent à l'intérieur d'une TouchableOpacity? 

J'apprécie grandement toute aide donnée.

reactjsreact-nativereact-native-iosreact-native-flatlist
3
falconsAndFunctions

vous devriez écrire une fonction renderItem comme celle-ci

renderItem = ({item, index}) => {
 // return here
}
5
Shubham

Une hypothèse, avez-vous essayé de changer pour renderItem={this.renderItem.bind(this)}?

2
Marcos Demétrio

Vous devez utiliser bind(this,item) ou changer de fonction comme (item)=>.

0
Amin Noura