ldisplayDetailForFilm不是一个函数。(在"displayDetailForFilm"中，"displayDetailForFilm"未定义

Question

我正在学习react native。我尝试创建两个视图之间的导航，但事实证明，错误TypeError: displayDetailForFilm不是一个函数。(在'displayDetailForFilm(film.id)'中，'displayDetailForFilm'未定义)**下面是我的代码:

import React from 'react'
import { StyleSheet, View, TextInput, Button, Text, FlatList, ActivityIndicator} from 'react-native'
import FilmItem from './FilmItem'
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi'
class Search extends React.Component {

constructor(props) {
super(props)
this.searchedText = "" 
this.page = 0 
this.totalPages = 
// l'API TMDB
this.state = {
films: [],
isLoading: false,

}
_displayDetailForFilm = (idFilm) => {
console.log("Display film with id " + idFilm)
}
}

// Components/FilmItem.js
import React, { Component } from 'react'
import { StyleSheet, View, Text, Image,TouchableOpacity  } from 'react-native'
import {getImageFromApi} from '../API/TMDBApi.js'

class FilmItem extends React.Component {
render() {

const { film, displayDetailForFilm } = this.props

return (
<TouchableOpacity style={styles.main_container} onPress={() => displayDetailForFilm(film.id)}>
......
</TouchableOpacity>
)

}
}

如果你需要更多的代码才能回复我，请告诉我

Answer 1

我和你上同样的课，我有同样的问题…这是我的代码和文档。

Search.js

class Search extends React.Component {
_displayDetailForFilm = (idFilm) => {
console.log("Voir l'ID du film :" + idFilm);
this.props.navigation.navigate('Detail', { screen: 'FilmItem'})
}
}

Navigation.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'

export default function Nav() {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Recherche" component={Search} />
<Stack.Screen name="Detail" component={FilmDetail} />
</Stack.Navigator>
</NavigationContainer>
);
}

FilmItem.js

import React from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import {getImageFromApi} from '../API/TMDB'

class FilmItem extends React.Component {
render() {
console.log(this.props)
const film = this.props.film
const displayDetailForFilm = this.props._displayDetailForFilm
return (
<TouchableOpacity 
onPress={()=> displayDetailForFilm(film.id)} 
style={styles.main_container}>
{...}
/>
{...}
</TouchableOpacity>

https://reactnavigation.org/docs/nesting-navigators/