Question

在登录屏幕上工作。当我第一次通过命令 npx react-native run-android 运行该应用程序时，它工作正常，但是当我重新加载它时，它给了我以下错误：

TypeError: undefined is not an object (evaluating 'this.state')

This error is located at:
    in Login (at App.js:6)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

这是我的代码：

import React, {Component} from 'react';
import { Text, View, TouchableOpacity, TextInput, StyleSheet} from 'react-native';

export default function Login(){
    state = {
        email: '',
        password: ''
     }
     handleEmail = (text) => {
        this.setState({ email: text })
     }
     handlePassword = (text) => {
        this.setState({ password: text })
     }
     login = (email, pass) => {
        alert('email: ' + email + ' password: ' + pass)
     }
    return(
        <View style = {styles.container}>
        <View style = {styles.container1}>
            <Text style = {styles.titleText}>This is my title</Text>
            <Text style = {styles.titleSlogan}>This is my text</Text>
        </View>
        <View style = {styles.container2}>
        <TextInput style = {styles.input}
           underlineColorAndroid = "transparent"
           placeholder = "Email"
           placeholderTextColor = "#9a73ef"
           autoCapitalize = "none"
           onChangeText = {this.handleEmail}/>
        
        <TextInput style = {styles.input}
           underlineColorAndroid = "transparent"
           placeholder = "Password"
           placeholderTextColor = "#9a73ef"
           autoCapitalize = "none"
           onChangeText = {this.handlePassword}/>
        
        <TouchableOpacity
           style = {styles.submitButton}
           onPress = {
              () => this.login(this.state.email, this.state.password)
           }>
           <Text style = {styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>
     </View>
     </View>
    )
}

请有人指导我，因为我处于初级阶段并且不知道技术细节。

Answer 1

您对原始帖子的评论建议您研究类与函数组件。评论者认为您的原始代码与类组件更接近是正确的。但是，我认为学习函数组件的工作方式有很多价值，因为这似乎是 React 前进的方向。

export default function Login() {
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('')

     const handleEmail = (text) => {
        setEmail(text)
     }
     const handlePassword = (text) => {
        setPassword(text)
     }
     const login = (email, pass) => {
        alert('email: ' + email + ' password: ' + pass)
     }
    return(
        <View style = {styles.container}>
        <View style = {styles.container1}>
            <Text style = {styles.titleText}>IbexCoin</Text>
            <Text style = {styles.titleSlogan}>The Future CryptoCurrency</Text>
        </View>
        <View style = {styles.container2}>
        <TextInput style = {styles.input}
           underlineColorAndroid = "transparent"
           placeholder = "Email"
           placeholderTextColor = "#9a73ef"
           autoCapitalize = "none"
           onChangeText = {handleEmail}/>
        
        <TextInput style = {styles.input}
           underlineColorAndroid = "transparent"
           placeholder = "Password"
           placeholderTextColor = "#9a73ef"
           autoCapitalize = "none"
           onChangeText = {handlePassword}/>
        
        <TouchableOpacity
           style = {styles.submitButton}
           onPress = {
              () => login(email, password)
           }>
           <Text style = {styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>
     </View>
     </View>
    )
}

电子邮件和密码不是只有一种状态 (this.state)，而是使用 useState 挂钩 (https://reactjs.org/docs/hooks-state.html) 存储在单独的变量中。

handleEmail、handlePassword、login 等函数现在被内联声明为 const 而不是类的属性。

return() 最后保持不变——如果这是一个类组件，你会想要一个返回所有这些东西的 render() 函数。

在函数组件中删除了对 this 的所有引用。

还有更多的重构可以完成，但这应该可以帮助您开始学习功能组件中的状态。

类型错误：未定义不是对象（评估“this.handleEmail”）

1 个答案: