реагировать на родной элемент списка не определено

Question

Я пытаюсь сделать мой плоский список повторно используемым компонентом, но получаю ошибку

item is not defined.

Как я могу разрешить моей функции печати иметь доступ к элементу внутри моего повторно используемого компонента?

Код:

import React, { Component } from 'react';
import { Text, View } from 'react-native';



export const WebsiteFlatlist = (props) => {
    return(
        <FlatList
        data={props.data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
            <TouchableOpacity
                onPress={props.onPress}
            >
                <View>
                    <View>
                        <Text>{item.location}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )}
    />

    )

};

Usage:

<WebsiteFlatlist data={places} onPress={() =>{this._onPress(item.location)}}/>




 _onPress = async (places) => {
        console.log(places)
    };                  

Answer 1

Вы должны связать элемент и напрямую передать функцию в реквизиты onPress.

import React, { Component } from 'react';
import { Text, View } from 'react-native';



export const WebsiteFlatlist = (props) => {
    return(
        <FlatList
        data={props.data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
            <TouchableOpacity
                onPress={props.onPress.bind(null, item)}
            >
                <View>
                    <View>
                        <Text>{item.location}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )}
    />

    )

};

Использование:

<WebsiteFlatlist data={places} onPress={this._onPress}/>

 _onPress = async (places) => {
        console.log(places)
    };  

Answer 2

Передайте только функциональную ссылку в ваш <WebsiteFlatlist onPress={this._onPress}>.Пока в общий компонент внесены некоторые изменения.

1. Разделите компонент renderItem.
2. Используйте функцию для визуализацииItem внутри компонента.

const renderItem = (item) => {
return (
<TouchableOpacity onPress={()=>props.onPress(item)}>
   <View>
       <View>
           <Text>{item.location}</Text>
       </View>
   </View>
</TouchableOpacity>
)}

<FlatList
   data={props.data}
   keyExtractor={(item, index) => index.toString()}
   renderItem={
       ({ item }) => (this.renderItem(item))
   }
/>

Answer 3

В вашей функции onPress вы должны сделать следующее:

onPress={this._onPress}

Таким образом, вы передаете функцию _onPress(location) в качестве обратного вызова в ваш плоский список.