Question

未定义 React Native Flatlist 项

2019-07-01

1452

reactjs react-native react-native-flatlist

我正在尝试将 flatlist 变成可重复使用的组件，但出现错误

item is not defined.

如何让我的 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}
            >
                <View>
                    <View>
                        <Text>{item.location}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )}
    />

    )

};

用法：

<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

在您的 onPress 函数中，您应该执行以下操作：

onPress={this._onPress}

通过这种方式，您将 _onPress(location) 函数作为回调传递到您的平面列表。

Answer 3

仅在您的 <WebsiteFlatlist onPress={this._onPress}> 中传递函数引用。而在通用组件中进行一些更改。

分离 renderItem 组件。
使用函数在组件内 renderItem。

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))
   }
/>