Столкнулся с проблемой, когда я вводю данные в поле «Адрес», где я хочу получить домашний адрес пользователя, и он автоматически удаляется, в то время как другие поля работают нормально, т. е. введенные данные остаются в поле.
Приношу извинения за неправильное именование переменных, поскольку я все еще новичок. Вот код:
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 handleChangeEvent = (field, value) => {
console.info(`Changing ${field} to ${value}`);
setAddress((prev) => ({ ...prev, [field]: value }));
};
console.info("Rerendering AddressScreen");
return (
<View style = {StyleSheet.container}>
<TextInput
style = {styles.input}
placeholder = "Full Name"
value = {address.fullName}
onChangeText = {(text) => handleChangeEvent("fullName", text)}
/>
<TextInput
style = {styles.input}
placeholder = "Address"
value = {address.addressLine}
onChargeText = {(text) => handleChangeEvent("addressLine", text)}
/>
<TextInput
style = {styles.input}
placeholder = "City"
value = {address.city}
onChangeText = {(text) => handleChangeEvent("city", text)}
/>
<TextInput
style = {styles.input}
placeholder = "Email Address"
value = {address.emailAddress}
onChangeText = {(text) => handleChangeEvent("emailAddress", text)}
/>
<TextInput
style = {styles.input}
placeholder = "Phone Number"
value = {address.phoneNumber}
onChangeText = {(text) => handleChangeEvent("phoneNumber", text)}
/>
<Pressable style = {styles.doneButton} onPress = {handleDone}>
<Text style = {styles.doneButtonText}>DONE</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({...})
handleAddressChange
берет данные из всех текстовых полей и передает их другому компоненту, так что это не должно быть проблемой. Я сделал журналы и понял, что handleChangeEvent
не вызывается всякий раз, когда я вводю данные в поле адреса, в то время как это происходит для других полей, и данные, введенные только в поле адреса, автоматически удаляются через секунду, в то время как другие поля этого не делают. демонстрируют такое же поведение. Поскольку код для всех полей написан одинаковый (по моему мнению), почему так происходит и как исправить?
В вашем коде опечатка.
Ниже приведен ваш код (опечатка onChargeText
):
<TextInput
style = {styles.input}
placeholder = "Address"
value = {address.addressLine}
onChargeText = {(text) => handleChangeEvent("addressLine", text)}
/>
Измените его с помощью onChangeText
:
<TextInput
style = {styles.input}
placeholder = "Address"
value = {address.addressLine}
onChangeText = {(text) => handleChangeEvent("addressLine", text)}
/>
Я опустошен, чувак, но огромное тебе спасибо!