React Native 中的文本字段中的地址数据字段会自动删除

Question

面临这样的问题：我在“地址”字段中输入数据，我想获取用户的家庭住址，但它会自动被删除，而其他字段工作正常，即输入的数据保留在该字段中。

对错误的变量命名表示歉意，因为我还是一个初学者。这是代码：

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  Pressable,
  Image,
  Alert,
} from "react-native";
import { useRoute, useNavigation } from "@react-navigation/native";

export default function AddressScreen() {
  const route = useRoute();
  const navigation = useNavigation();
  const { address: initialAddress, handleAddressChange } = route.params;
  const [address, setAddress] = useState(initialAddress);

  const handleDone = () => {
    if (Object.values(address).some((val) => val.trim() === "")) {
      Alert.alert("Error, Please fill in all fields.");
      return;
    }
    handleAddressChange(address);
    navigation.goBack();
  };

  const handleChange = (field, value) => {
    console.log(`Changing ${field} to ${value}`);
    setAddress((prev) => ({ ...prev, [field]: value }));
  };

  console.log("Rerendering AddressScreen");
  return (
    <View style={StyleSheet.container}>
      <TextInput
        style={styles.input}
        placeholder="Full Name"
        value={address.fullName}
        onChangeText={(text) => handleChange("fullName", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Address"
        value={address.addressLine}
        onChargeText={(text) => handleChange("addressLine", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="City"
        value={address.city}
        onChangeText={(text) => handleChange("city", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Email Address"
        value={address.emailAddress}
        onChangeText={(text) => handleChange("emailAddress", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Phone Number"
        value={address.phoneNumber}
        onChangeText={(text) => handleChange("phoneNumber", text)}
      />
      <Pressable style={styles.doneButton} onPress={handleDone}>
        <Text style={styles.doneButtonText}>DONE</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({...})

handleAddressChange

从所有文本字段获取数据并传递到另一个组件，因此这不应该是问题。我做了日志，我发现每当我在地址字段中输入数据时，

handleChange

都不会被调用，而其他字段则会被调用，并且仅输入到地址字段中的数据会在一秒钟后自动删除，而其他字段则不会不表现出相同的行为。由于所有字段的代码都是相同的（根据我的说法）为什么会发生这种情况以及如何修复？

Answer 1

要诊断并解决“地址”字段自动清除而其他字段保留其数据的问题，请按照以下步骤操作：

HTML 和表单验证：

确保没有必需的属性或其他验证规则导致字段重置。 检查地址字段的输入类型是否正确。它应该是 。 JavaScript 或 jQuery：

如果您使用 JavaScript 或 jQuery 来处理表单数据，请确保没有运行清除“地址”字段的脚本。 查找可能重置字段的任何事件侦听器（例如 onchange、oninput 或 onsubmit）。 后端处理：

确保后端正确处理从表单发送的数据。 检查是否存在任何服务器端验证或处理，如果数据不满足某些条件，则可能会清除该字段。 检查元素：

使用浏览器的开发人员工具（右键单击地址字段并选择“检查”）检查该字段是否有任何控制台错误或问题。 监视网络请求以查看数据是否正确发送和接收。 表格重置：

确保表单在提交后不会以编程方式重置。这可以通过 JavaScript 使用 form.reset() 或类似的方法来完成。 检查自动完成：

如果您有自动完成属性，请确保它们设置正确。不正确的自动完成设置可能会干扰该字段的行为。