找不到变量 setUserEmail

Question

I'm linking my backend with my frontend in react native and I get this error Can't find-variable: setUserEmail when I go to type in an email into the TextInput . I'm working on the login page and use a fetch API to log the user into the app. I followed a tutorial to the point but I'm getting this error each time I try to enter an email, I get a message say setUserEmail is declared but never used. Any help would be greately appreciated

import React, { Component, useState, createRef } from 'react';
import { StyleSheet, Text, TextInput, View, Dimensions, StatusBar, TouchableOpacity,Keyboard } from 'react-native';

export default function Login(){         
    const [userEmail, setUserEmail] = useState('');
    const [userPassword, setUserPassword] = useState('');
    const [loading, setLoading] = useState(false);

    const handleSubmitPress = () => {
        setLoading(true);
        let dataToSend = {userEmail: userEmail, password: userPassword};
        let formBody = [];
        for (let key in dataToSend) {
            let encodedKey = encodeURIComponent(key);
            let encodedValue = encodeURIComponent(dataToSend[key]);
            formBody.push(encodedKey + '=' + encodedValue);
        }
        formBody = formBody.join('&');

        fetch('http://localhost:3000/users/users', {
            method: "POST",
            headers: {
            Accept: "application/json",
            "Content-Type": "application/json",            
            "Cache-Control": "no-cache",
            Pragma: "no-cache",
            Expires: "0",
        },
            body: JSON.stringify({
            userEmail: userEmail,                 
            password: userPassword,                
            os: Platform.OS === "ios" ? "iOS" : "Android",
            }),
        })
        .then((response) => response.json())
        .then((responseJson) => {
        //Hide Loader
        setLoading(false);
        console.log(responseJson);
        // If server response message same as Data Matched
        if (responseJson.status === 'success') {
            AsyncStorage.setItem('user_id', responseJson.data.email);
            console.log(responseJson.data.email);
            navigation.replace('DrawerNavigationRoutes');
        } else {
            setErrortext(responseJson.msg);
            console.log('Please check your email id or password');
            }
        })
        .catch((error) => {
        //Hide Loader
        setLoading(false);
        console.error(error);
        });
    }

    return(
        <View style={style.container}>

            <View style={style.parent}>
                <Text style={style.title}>Login</Text>
                <Text style={style.heading}>Please Sign in to continue</Text>
            </View>

            <View style={style.root}>
                <TextInput name='txtEmail' placeholder='someone@something.com' style={style.email} onChangeText={(UserEmail) => setUserEmail(UserEmail)}/>
                <TextInput type='password' name='txtPassword' placeholder='Password' secureTextEntry={true} style={style.password} onChangeText={(UserPassword) => setUserPassword(UserPassword)}/>                                                    
                <Text style={style.forgotpassword}>Forgot Password?</Text>

                <TouchableOpacity 
                    title="Login"
                    style={style.login}
                    onPress={handleSubmitPress()}>

                    <Text style={style.login_caption}>Login </Text>
                </TouchableOpacity>     

            </View>

                
            <StatusBar hidden />
        </View>
    );
    
}

const style =  StyleSheet.create({
    container:{
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,          
    },
    forgotpassword:{
        textAlign: 'right',
        marginTop: 10,
    },
    login:{
        width: 150,
        height: 45,
        backgroundColor: '#FFB900',     
        position: 'absolute',
        right: 0,  
        marginLeft: 25,
        marginRight: 15,         
        marginTop: 150,
        borderRadius: 25,        
    },
    login_caption:{
        color: '#fff',
        textAlign: 'left',
        paddingLeft: 15,
        justifyContent: 'center',        
        paddingTop: 12,        
    },
    parent:{
        marginTop: 85,
    },
    title:{
        fontSize: 36,
        fontWeight: "900",
        paddingLeft: 25,
    },
    heading:{
        color: '#C0C0C0',
        paddingLeft: 25,
    },
    root:{
        width: 250,
        height: 350,                     
        marginTop: 85,
        alignSelf: 'center',
    },
    email:{        
        width: 275,
        height:38,
        borderColor: "#111",
        borderWidth: 1,
        fontSize: 16,
        paddingLeft:10,
        justifyContent: 'center',
        borderRadius: 15, 
        alignSelf: 'center',
    },
    password:{
        width: 275,
        height:38,
        borderColor: "#111",
        alignSelf: 'center',
        borderWidth: 1,
        fontSize: 16,
        paddingLeft:10,
        justifyContent: 'center',   
        marginTop: 15,
        borderRadius: 15,    
    }
});

UPDATED WITH CHANGES

Answer 1

With a little bit of cleaning, that what I ended up with:

import AsyncStorage from "@react-native-community/async-storage";
import React, { useState } from "react";
import { Dimensions, Platform, StatusBar, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";

const Login = () => {
  const [userEmail, setUserEmail] = useState("");
  const [userPassword, setUserPassword] = useState("");
  const [errorText, setErrorText] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmitPress = () => {
    setLoading(true);
    const dataToSend = { userEmail: userEmail, password: userPassword };
    let formBody = [];
    for (const key in dataToSend) {
      const encodedKey = encodeURIComponent(key);
      const encodedValue = encodeURIComponent(dataToSend[key]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    fetch("http://localhost:3000/users/users", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Cache-Control": "no-cache",
        Pragma: "no-cache",
        Expires: "0",
      },
      body: JSON.stringify({
        userEmail: userEmail,
        password: userPassword,
        os: Platform.OS === "ios" ? "iOS" : "Android",
      }),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        //Hide Loader
        setLoading(false);
        console.log(responseJson);
        // If server response message same as Data Matched
        if (responseJson.status === "success") {
          AsyncStorage.setItem("user_id", responseJson.data.email);
          console.log(responseJson.data.email);
          // navigation.replace('DrawerNavigationRoutes');
        } else {
          setErrorText(responseJson.msg);
          console.log("Please check your email id or password");
        }
      })
      .catch((error) => {
        //Hide Loader
        setLoading(false);
        console.error(error);
      });
  };

  return (
    <View style={styles.container}>
      <View style={styles.parent}>
        <Text style={styles.title}>Login</Text>
        <Text style={styles.heading}>Please Sign in to continue</Text>
      </View>

      <View style={styles.root}>
        <TextInput
          name="txtEmail"
          placeholder="someone@something.com"
          style={styles.email}
          onChangeText={(UserEmail) => setUserEmail(UserEmail)}
        />
        <TextInput
          type="password"
          name="txtPassword"
          placeholder="Password"
          secureTextEntry={true}
          style={styles.password}
          onChangeText={(UserPassword) => setUserPassword(UserPassword)}
        />
        <Text style={styles.forgotpassword}>Forgot Password?</Text>

        <TouchableOpacity title="Login" style={styles.login} onPress={handleSubmitPress}>
          <Text style={styles.login_caption}>Login </Text>
        </TouchableOpacity>
      </View>
      <StatusBar hidden />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: Dimensions.get("window").height,
    width: Dimensions.get("window").width,
  },
  email: {
    alignSelf: "center",
    borderColor: "#111",
    borderRadius: 15,
    borderWidth: 1,
    fontSize: 16,
    height: 38,
    justifyContent: "center",
    paddingLeft: 10,
    width: 275,
  },
  forgotpassword: {
    marginTop: 10,
    textAlign: "right",
  },
  heading: {
    color: "#C0C0C0",
    paddingLeft: 25,
  },
  login: {
    backgroundColor: "#FFB900",
    borderRadius: 25,
    height: 45,
    marginLeft: 25,
    marginRight: 15,
    marginTop: 150,
    position: "absolute",
    right: 0,
    width: 150,
  },
  login_caption: {
    color: "#fff",
    justifyContent: "center",
    paddingLeft: 15,
    paddingTop: 12,
    textAlign: "left",
  },
  parent: {
    marginTop: 85,
  },
  password: {
    alignSelf: "center",
    borderColor: "#111",
    borderRadius: 15,
    borderWidth: 1,
    fontSize: 16,
    height: 38,
    justifyContent: "center",
    marginTop: 15,
    paddingLeft: 10,
    width: 275,
  },
  root: {
    alignSelf: "center",
    height: 350,
    marginTop: 85,
    width: 250,
  },
  title: {
    fontSize: 36,
    fontWeight: "900",
    paddingLeft: 25,
  },
});

export default Login;

There were few mistakes in your code,

• you used setErrorText without declaring it.
• this line <TouchableOpacity title="Login" style={styles.login} onPress={handleSubmitPress()}> was not good, maybe it was the cause of infinite rendering.

I solved all those errors very easily by using some extension in my IDE to clean code automatically like prettier and ESLint , and I used typescript. I really suggests that you do the same.