ReactNative-在TouchableOpacity onPress（）

Question

我正在尝试使用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表示，该功能在按下其中一个数据时使用（我在使用View

的touchableopacity前

因此，当按下touchableopacity时，在我的控制台上我得到了idFilm，而我在Search.js上的渲染中的console.log在我的控制台中显示了道具，但是当我在函数中添加console.log(this.props)时{ {1}}，当按下touchableopacity时，将返回该错误：_displayDetailForFilm() 我将"Undefined is not an object (evaluating 'this.props')"更改为touchableopacity，将View更改为onPress，并在获得onStartShouldSetResponder后在控制台上显示id 我在网上搜索，但没有找到解决方案:(如果有人可以帮助请plz

Answer 1

由于缺少导入语句以及传递的道具，因此很难完全理解代码，也许您可​​以在此处添加完整的代码示例。

根据您所包含的代码，我猜想Search.js中的axios.defaults.headers.common['Authorization'] = "Bearer " + token 在另一个范围内（可能是Search组件的范围），这就是Search元素（您也可以尝试{{1 }}进行检查）。否则您将无法正确传递函数引用，并且根本没有作用域，但是如果没有完整的代码，很难猜测。您可以将prop作为第二个参数传递给displayDetailForFilm，但是也许有一个更好的选择，具体取决于您实际想要实现的功能/该功能中想要的数据。