React Native: индекс FlatList говорит, что он не определен - PullRequest
Новая
       45

React Native: индекс FlatList говорит, что он не определен

1 голос
/ 08 мая 2019

Я пытаюсь получить индекс элемента, по которому щелкнули, в FlatList в реагировать нативно.Как говорится в документации, я передаю индекс в команду renderItem.Мой код выглядит следующим образом: 

/**
 * Goes to the show view of a container
 * @param {*} index 
 */
showContainer = (index) => {
    console.log(index); 
}

render() {
    return (
        <DefaultScrollView style={styles.container}>
            <FlatList
                data={this.props.containers}
                renderItem={(data, index) => (
                    <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name}
                        titleStyle={styles.title}
                    />
                )}/>
        </DefaultScrollView>
    );
}

Единственный способ, которым он работает, - это передать номер в качестве индекса, например: renderItem={(data, index = 0), но как передать переменную индекса, чтобы всегда иметь правильныйindex?

Заранее спасибо

Ответы [ 3 ]

1 голос
/ 08 мая 2019

Вам необходимо уничтожить ваших данных, прежде чем передавать их на renderItem.

Итак, измените: 

 renderItem={(data, index) => ( ...

Кому: 

 renderItem={({item, index}) => (...

И тогда вы можете получить доступ к своим данным, например, с помощью item.id.

Упрощенная рабочая демонстрация:

https://snack.expo.io/B1AONkehN

0 голосов
/ 08 мая 2019

Проблема в коде:

Ваш код: 

   renderItem={(data, index) => (

Правильный ответ: 

 renderItem={({ item, index }) => (

Вы можете обновить свой renderItem, и он решит вашу проблему .:

renderItem={({ item, index }) => (
           <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name}
                        titleStyle={styles.title}
                    />
        )}
0 голосов
/ 08 мая 2019

просто оберните data, index с помощью {} и измените каждый data на item, 

  renderItem={({item, index}) => ( ....
              ....
              key={item.item.id} // like this every where
...