TypeError: undefined не является объектом (оценка '_this.props.navigation.navigate') reactNavigation 5

Question

Я пытаюсь изменить вид из моего поиска. js файл. но я не могу и сталкиваюсь с этой ошибкой в ​​моем приложении, которое вылетает. И каждый раз, когда я делаю console.log (this.props) в моем поиске. js файл, я получаю такой результат: ----------------------- ------------- opooi- Объект {}. enter image description here">

Это мой поиск. js файл

//Components/Search.js

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

class Search extends React.Component {



  _displayDetailForFilm = (idFilm) => {
    //console.log("Display film with id " + idFilm + this )
    console.log('----------------------opooi-')
   console.log(this.props)
    // Cette commande ci-dessous est non fonctionnel donc si vous avez la solution...
    this.props.navigation.navigate("Details")
  }

  constructor(props) {
    super(props)
    this.page = 0
    this.totalPages = 0
    this.searchedText = "" // Initialisation de notre donnée searchedText en dehors du state
    this.state = {
      films: [],
      isLoading : false // Affiche temoin de chargement desactiver de base
    }
  }

  _loadFilms() {
    this.setState({ isLoading: true})
    if (this.searchedText.length > 0) { // Seulement si le texte recherché n'est pas vide
      getFilmsFromApiWithSearchedText(this.searchedText, this.page+1).then(data => {
        this.page = data.page
        this.totalPages = data.total_pages
        this.setState({ 
            films: [...this.state.films , ...data.results ],
          isLoading : false 
        })
      })
    }
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
          {/* Le component ActivityIndicator possède une propriété size pour définir la taille du visuel de chargement : small ou large. Par défaut size vaut small, on met donc large pour que le chargement soit bien visible */}
        </View>
      )
    }
  }

_searchFilms() {
  this.page = 0
  this.totalPages = 0
  this.setState({
    films: []
  }, ()=> {
    // J'utilise la paramètre length sur mon tableau de films pour vérifier qu'il y a bien 0 film
  console.log("Page : " + this.page + " / TotalPages : " + this.totalPages + " / Nombre de films : " + this.state.films.length)
  this._loadFilms()
  })

}

  _searchTextInputChanged(text) {
    this.searchedText = text // Modification du texte recherché à chaque saisie de texte, sans passer par le setState comme avant
  }

  render() {
    const { film, displayDetailForFilm } = this.props
    console.log('----------------------------')
    console.log(this.props);

    // test si lóbject this.props est null..
    return (
        <View
            style={styles.main_container}
            onPress={() => displayDetailForFilm(film.id)}
          > 
        <TextInput
          style={styles.textinput}
          placeholder='Titre du film'
          onChangeText={(text) => this._searchTextInputChanged(text)}
          onSubmitEditing={() => this._searchFilms()}
        />
        <Button title='Rechercher' onPress={() => this._searchFilms()}/>
        <FlatList
          data={this.state.films}
          keyExtractor={(item) => item.id.toString()}

          onEndReachedThreshold={0.5}
          onEndReached={() => {
            if (this.page < this.totalPages) {
              this._loadFilms()
            }
          }}

Это моя навигация. js файл

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

const Stack = createStackNavigator();



const HomeScreen =({ navigation }) => {
  return (

    <Search/>
  );
}



const DetailsScreen = ({ navigation }) => {
  return (
    <FilmDetail/>
  );
}



function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default Navigation;

Вот мой Filmitem. js файл, в котором я использую TouchableOpacity

// Components/FilmItem.js

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

class FilmItem extends React.Component {
  render() {
    const film = this.props.film
    const displayDetailForFilm = this.props.displayDetailForFilm
    return (
      <TouchableOpacity
        style={styles.main_container}
        onPress={() => displayDetailForFilm(film.id)}>
        <Image
          style={styles.image}
          source={{uri: getImageFromApi(film.poster_path)}}
        />
        <View style={styles.content_container}>
          <View style={styles.header_container}>
            <Text style={styles.title_text}>{film.title}</Text>
            <Text style={styles.vote_text}>{film.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{film.overview}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>{film.release_date}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: 'row'
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: 'gray'
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: 'row'
  },
  title_text: {
    fontWeight: 'bold',
    fontSize: 20,
    flex: 1,
    flexWrap: 'wrap',
    paddingRight: 5,
    color: '#FFFFFF'
  },
  vote_text: {
    fontWeight: 'bold',
    fontSize: 26,
    color: '#FFFFFF'
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: 'italic',
    color: '#FFFFFF'
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: 'right',
    fontSize: 14,
    color: '#FFFFFF'
  }
})

export default FilmItem

Вот представление, к которому я пытаюсь получить доступ

// Components/FilmDetail.js

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

class FilmDetail extends React.Component {
  render() {
    return (
      <View style={styles.main_container}>
        <Text>Détail du film</Text>

        <Button
      title={`Go to ${Home}`}
      onPress={() => navigation.navigate(Home)}
    />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
  }
})

export default FilmDetail

Answer 1

Ошибка сообщает вам то, что вам нужно знать

Undefined не является объектом (оценка '_this.props.navigation.navigate')

Это относится к эта строка.

this.props.navigation.navigate("Details")

Очевидно, что this.props является объектом, а this.props.navigation - нет, поэтому this.props.navigation.navigate не сможет оценить. Причина , почему this.props.navigation равно undefined, заключается в том, что вы не передали свойство navigation своему компоненту.

const HomeScreen =({ navigation }) => {
  return (
    <Search/>
  );
}

Здесь вы определили HomeScreen компонент, который равен , получает опору navigation, но ошибка, которую вы получаете, находится в вашем Search компоненте, который не имеет эту опору. Вы можете просто передать его:

const HomeScreen =({ navigation }) => {
  return (
    <Search navigation={navigation}/>
  );
}

... или, если ваш компонент действительно настолько прост, вы можете сделать:

const HomeScreen = Search;

... и позволить Stack.Navigator передать navigation prop прямо в ваш компонент Search.