时间戳

首页 > 解决方案 > ldisplayDetailForFilm 不是函数。（在“displayDetailForFilm）”中，“displayDetailForFilm”未定义

react-native - ldisplayDetailForFilm 不是函数。（在“displayDetailForFilm）”中，“displayDetailForFilm”未定义

问题描述

我正在学习本机反应。我尝试在两个视图之间创建导航，但事实证明错误 **'TypeError: displayDetailForFilm is not a function。（在'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>
    )
    
  }
}

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

标签： react-nativeviewnavigation

解决方案

我正在和你做同样的课程，我遇到了同样的问题......这是我的代码和文档。

搜索.js

class Search extends React.Component {

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

导航.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/

推荐阅读