React-native：undefined不是对象（评估'_this3.props.navigation.navigate'）

Question

I have a button connected to a function, which does a fetch, and then navigates to the next screen. The fetch works fine, but attempting to navigate to the next screen gives this error:

undefined is not an object (evaluating '_this3.props.navigation.navigate')

Here is the code for the screen having this problem:

 import React, { Component } from 'react'; import { View, Text, AsyncStorage, Alert, FlatList, StyleSheet } from 'react-native'; import { UsersMap } from '../UsersMap'; import { PrimaryButton } from '../Buttons'; import styles from './styles'; import { ListItem } from '../ListItem'; import MapView, { Marker } from 'react-native-maps'; class RestOptions extends Component { constructor() { super(); this.state = { jsonResults: [], userPlaces: [], lat_center: 37.78825, lng_center: -122.4324, mapLoaded: false, screenLoaded: false, no_results: true } } renderItem = ({ item }) => { return ( <View> <Text>{item.rest_name}</Text> <Text>{item.counter}</Text> <Text>{item.distance}</Text> <PrimaryButton label="Set Reservation" onPress={() => this.setReservation(item.rest_id)} //this is the button /> </View> ) } componentDidMount() { this.getSearchResults(); } getSearchResults() { fetch('url goes here') .then((response) => response.json()) .then((responseJson) => { var placesArray = []; var latArray = []; var lngArray = []; if (responseJson != "No Restaurants Found.") { for (key = 0; key < responseJson.rest_array.length; key = key + 1) { var lati_str = responseJson.rest_array[key].lat; var long_str = responseJson.rest_array[key].lng; var count_str = responseJson.rest_array[key].counter; var lati = parseFloat(lati_str); var long = parseFloat(long_str); var count = parseFloat(count_str); latArray.push(lati); lngArray.push(long); placesArray.push ({ coordinates: { latitude: lati, longitude: long }, id: count }); } this.setState({ mapLoaded: true, userPlaces: placesArray, jsonResults: responseJson.rest_array }); } if (latArray.length > 0) { this.setState({no_results: false}); } var max_lat = Math.max.apply(null, latArray); var min_lat = Math.min.apply(null, latArray); var max_lng = Math.max.apply(null, lngArray); var min_lng = Math.min.apply(null, lngArray); var latCenter = (max_lat + min_lat) / 2; var lngCenter = (max_lng + min_lng) / 2; this.setState({ lat_center: latCenter, lng_center: lngCenter, screenLoaded: true }); }).catch((error) => { console.error(error); }); } setReservation(rest_id) { fetch('url goes here', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application.json', }, body: JSON.stringify({ restaurant_id: rest_id }) }).then((response) => response.json()) .then((responseJson) => { if (responseJson == 1) { this.props.navigation.navigate('SetReservation'); //getting an error from this navigation ^^ } else { Alert.alert("Error"); } }).catch((error) => { console.error(error); }); } render() { const listItem = <FlatList data={this.state.jsonResults} renderItem={this.renderItem} keyExtractor={(item, index) => index.toString()} />; const noResults = <Text>No Restaurants Found.</Text>; const screenLoading = <Text>Getting your results...</Text>; let message; if (!this.state.screenLoaded) { message = screenLoading } else { if (this.state.no_results) { message = noResults } else { message = listItem } } return ( <View> {this.state.mapLoaded && <View style={mapStyles.mapContainer}> <MapView style={mapStyles.map} initialRegion={{ latitude: this.state.lat_center, longitude: this.state.lng_center, latitudeDelta: 0.1022, longitudeDelta: 0.0821 }} > {this.state.userPlaces.map(userPlace => ( <MapView.Marker coordinate={userPlace.coordinates} key={userPlace.id} /> ))} </MapView> </View>} {message} </View> ); } }; const mapStyles = StyleSheet.create({ mapContainer: { width: '100%', height: 200, }, map: { width: '100%', height: '100%', }, }); export default RestOptions; 

Here is my router:

 import React from 'react'; import { StackNavigator, TabNavigator, SwitchNavigator } from 'react-navigation'; import Icon from 'react-native-vector-icons/Ionicons'; import Search from '../screens/Search'; import Account from '../screens/Account'; import Line from '../screens/Line'; import Reservations from '../screens/Reservations'; import SearchResults from '../screens/SearchResults'; import SetReservation from '../screens/SetReservation'; import SignIn from '../screens/SignIn'; export const SignInStack = StackNavigator({ SignIn: { screen: SignIn, navigationOptions: { title: 'Sign In', }, }, }); const SearchStack = StackNavigator({ Search: { screen: Search, navigationOptions: (props) => ({ title: 'Search Restaurants', }), }, SearchResults: { screen: SearchResults, navigationOptions: { title: 'Search Results', }, }, SetReservation: { screen: SetReservation, navigationOptions: { title: 'Set Reservation', }, }, }); const ReservationsStack = StackNavigator({ Reservations: { screen: Reservations, navigationOptions: (props) => ({ title: 'Reservations', }), }, }); const AccountStack = StackNavigator({ Account: { screen: Account, navigationOptions: (props) => ({ title: 'Account', }), }, }); export const Tabs = TabNavigator({ Search: { screen: SearchStack, navigationOptions: { tabBarLabel: 'Search', tabBarIcon: ({ tintColor }) => <Icon name="md-list" size={35} color={tintColor} /> }, }, Reservations: { screen: ReservationsStack, navigationOptions: { tabBarLabel: 'Reservations', tabBarIcon: ({ tintColor }) => <Icon name="md-contact" size={35} color={tintColor} /> }, }, Account: { screen: AccountStack, navigationOptions: { tabBarLabel: 'Account', tabBarIcon: ({ tintColor }) => <Icon name="md-add" size={35} color={tintColor} /> }, }, }); export const AppRoute = SwitchNavigator( { Auth: SignInStack, App: Tabs, }, { initialRouteName: 'Auth', } ); 

Previous screens are able to navigate without problems. I have looked at the other questions regarding this error, and none of them have helped with this situation.

Answer 1

You can use withNavigation .

withNavigation is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

import { withNavigation } from 'react-navigation';
.
.
.
// your component
.
.
.
export default withNavigation(RestOptions);