ReactNative-This.props在TouchableOpacity onPress()中未定义

问题描述 投票:0回答:1

我正在尝试使用Stacknavigator,此“ Search.js”和“ DetailFilm.js”上有2个组件我在组件Search.js上有此代码]

import React from 'react';
import FilmItem from './FilmItem';
import films from '../Helpers/filmData';
import { getFilm } from '../API/TMDBApi';
import { StyleSheet, Text, View, Button, TextInput, FlatList, ActivityIndicator } from 'react-native';



class Search extends React.Component{

constructor(props){
    super(props)
    this.state = {
        films: [],
        isLoading: false
    }
    this.page = 0
    this.totalPage = 0
    this.searchedText = ''
}

_displayLoading(){
    if(this.state.isLoading){
        return(
            <View style={styles.loading_container}>
                <ActivityIndicator size="large" color="purple"/>
            </View>
        )
    }
}

_loadFilms(){
    this.setState({
        isLoading: true
    })

    if(this.searchedText.length > 0){
        getFilm(this.searchedText, this.page+1).then((data) => {
            this.page = data.page
            this.totalPage = data.total_pages
            this.setState({
                films:  [...this.state.films, ...data.results],
                isLoading: false
            })

        })
    }
}

_searchFilms(){
    this.page = 0
    this.totalPage = 0
    this.setState({
        films: []
    },() => {
        this._loadFilms()
    })

}

_searchInputText(text){
    this.searchedText =  text
}

_displayDetailForFilm(idFilm){
    console.log("idFilm: "+idFilm)
    console.log(this.props)
}

render(){
    console.log(this.state.isLoading)
    // console.log(this.props)
    return(

        <View style={styles.container}>
            <TextInput onSubmitEditing={() => this._searchFilms()} onChangeText={(text) => this._searchInputText(text)} style={ styles.inputStyle } placeholder="Titre du film" />
            <Button style={styles.btnStyle} title="Rechercher" onPress= {() => this._searchFilms()}/>

            <FlatList
                data={this.state.films}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    if(this.state.films.length > 0 && this.page < this.totalPage){
                        this._loadFilms()
                    }
                }}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm} />}
            />

            {this._displayLoading()}
        </View>
    )
}

}

并且功能_displayDetailForFilm作为道具“ displayDetailForFilm”发送到另一个名为“ FilmItem.js”的组件

class FilmItem extends React.Component{

constructor(props){
    super(props)

}

render(){
    // const film = this.props.film
    // const detail = this.props.displayDetailForFilm
    const { film, displayDetailForFilm } = this.props
    return(
        <View onStartShouldSetResponder={() => displayDetailForFilm(film.id)} style={styles.container}>

                <Image 
                    style={styles.film_pic}
                    source={
                        {uri: getImageFromApi(film.poster_path)}
                    }
                />

            <View style={styles.film_info}>
                <View style={styles.title_vote}>
                    <Text style={styles.film_title}>{film.title}</Text>
                    <Text style={styles.film_vote}>{film.vote_average}</Text>
                </View>
                <View style={styles.film_description}>
                    <Text style={styles.film_detail} numberOfLines={6}>{film.overview}</Text>
                </View>
                <View style={styles.film_date}>
                    <Text style={styles.film_date_detail} >Sorti le {film.release_date}</Text>
                </View>
            </View>
        </View>
    )
}

}

[具有某种功能,可以搜索电影,但是效果很好,但是我想制作诸如“电影的更多信息”之类的功能,该功能由功能_displayDetailForFilm表示,当按下其中一个数据时,该功能将被使用。组件FilmItem),在View我使用过touchableopacity

之前“当按下touchableopacity时,将返回该错误:console.log(this.props)我将_displayDetailForFilm()更改为"Undefined is not an object (evaluating 'this.props')",将touchableopacity更改为View,在我的控制台上,当我获得onPress时显示onStartShouldSetResponder我在网上搜索,但未找到解决方案:(如果有人可以帮助请plz
react-native navigation touchableopacity
1个回答
0
投票
由于缺少导入语句以及传递的道具,很难完全理解代码,也许您可​​以在此处添加完整的代码示例。
© www.soinside.com 2019 - 2024. All rights reserved.