TypeError: undefined is not an object（評估'this.props = props'）

Question

我試圖實現堆棧導航，但我得到了這個錯誤，它說這個。 props 給出了我嘗試過的錯誤：

• 刪除 this.props 因為我在 App.js 中使用了 function 它沒有用

我已經嘗試了很多解決方案，但找不到一個好的答案，請解釋你的答案，以便每個人都能很好地理解它

這是我的代碼

APP.JS

 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator} from '@react-navigation/stack';
    
    
 import Login from './pages/Login';
 import Register from './pages/Register';


const Stack = createStackNavigator()

function MystackNav(){
  return(
    <Stack.Navigator>
      <Stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
      <Stack.Screen name='Register' component={Register} options={{headerShown:false}}/>
    </Stack.Navigator>
  )
}


export default function App(){
  return(
    <NavigationContainer>
      <MystackNav/>
    </NavigationContainer>
  )
}

登錄.JS

import React, { Component } from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    useColorScheme,
    Image,
    View,
} from 'react-native';

import Register from './Register';



export default class Login extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.container2}>
                    <View>
                        <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                    </View>
                    <View>
                        <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                    </View>
                    **<TouchableHighlight style={styles.button} 
                    onPress={()=>navigation.navigate('Register')}>
                        <Text style={styles.buttontext}>Login</Text>
                    </TouchableHighlight>**
                </View>
            </View>
        )
    }
}

Answer 1

同樣更改您的登錄名 class ：

//import Register from './Register'; //because you are not using this in your Login Class

export default class Login extends Component {

    constructor(props)
    {
      super(props);
    }


    render() {
        return (
            <View style={styles.container}>
            <View style={styles.container2}>
                <View>
                    <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                </View>
                <View>
                    <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                </View>
                <TouchableHighlight style={styles.button} 
                onPress={()=>this.props.navigation.navigate('Register')}>
                    <Text style={styles.buttontext}>Login</Text>
                </TouchableHighlight>
            </View>
        </View>
    )
}

}