为什么我的 React Native Expo 应用程序卡在捆绑中

Question

React-Native 和 JS 相当新。我一直在创建一个简单的登录屏幕，用于在我的手机中与 expo go 应用程序一起工作和捆绑，但在我输入“npm start”时修改了一点 App.js 文件后，它会永远保持捆绑状态，除非我关闭 VS 代码。

除了使用

npx create-expo-app@latest <name>

命令创建文件夹时默认的依赖项或修改外，没有其他依赖项或修改。

这是我的 App.js 代码

import { StyleSheet, Text, View, TextInput, Button, Image, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({});
  const [isPosting, setIsPosting] = useState(false)

  const validateForm = () => {
    let errors = {}

    if (!email) errors.email = "Email is required"
    if (!password) errors.password = "Password is required"

    setErrors(errors)

    return Object.keys(errors).length === 0;
  }

  const handleSubmit = async () => {
    if(validateForm()) {
      setIsPosting(true)
      console.log(email, password)
      const response = await fetch("IP", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          email: email,
          password: password
        })
      })
      console.log("Submitted:", email, password)
      const newP = await response.json()
      console.log(newP)
      setEmail("");
      setPassword("");
      setErrors({});
      setIsPosting(false)
    }
  }
  return (
    // makes the keyboard not interferre with the container that hass the username and apssswords
    <KeyboardAvoidingView 
      behavior="padding" 
      keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : -170} 
      style={styles.container}
    >
      <View style={styles.form}>
        <Image source={require("icon location")} style={styles.image} />
        <Text style={styles.label}>E-mail</Text>
        <TextInput 
          style={styles.input} 
          placeholder='Enter your E-mail' 
          value={email} 
          onChangeText={setEmail}
        />
        {
          errors.email ? <Text style={styles.errorText}>{errors.email}</Text> : null
        }
        <Text style={styles.label}>Passsword</Text>
        <TextInput 
          style={styles.input} 
          placeholder='Enter your password' 
          secureTextEntry 
          value={password} 
          onChangeText={setPassword}
        />
        {
          errors.password ? <Text style={styles.errorText}>{errors.password}</Text> : null
        }
        <Button title={isPosting ? "Logging in..." : "Login"} onPress={handleSubmit} />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: "center",
    paddingHorizontal: 20,
    backgroundColor: "f5f5f5"
  },

  form: {
    backgroundColor: "white",
    padding: 20,
    borderRadius: 10,
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },

  label: {
    fontSize: 16,
    marginBottom: 5,
    fontWeight: "bold",
  },

  input: {
    height: 40,
    borderColor: "#ddd",
    borderWidth: 1,
    marginBottom: 15,
    padding: 10,
    borderRadius: 5,
  },

  image: {
    width: 200,
    height: 200,
    alignSelf: "center",
    marginBottom: 50,
  },

  errorText: {
    color: "red",
    marginBottom: 10,
  },

});

它在 VS Code 中的样子，只要 VS Code 打开，就会保持捆绑状态，同时消耗处理能力。每次都卡在不同的%

尝试删除“node_modules”和“package-lock.json”文件，然后运行 npm install 但仍然没有任何结果。

仍然很新，所以不确切地知道我可以使用的所有工具来查找问题的根源

Answer 1

npx expo start --clear

为我工作