Поле адресных данных автоматически удаляется из текстового поля в собственном ответе

Столкнулся с проблемой, когда я вводю данные в поле «Адрес», где я хочу получить домашний адрес пользователя, и он автоматически удаляется, в то время как другие поля работают нормально, т. е. введенные данные остаются в поле.

Приношу извинения за неправильное именование переменных, поскольку я все еще новичок. Вот код:

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 не вызывается всякий раз, когда я вводю данные в поле адреса, в то время как это происходит для других полей, и данные, введенные только в поле адреса, автоматически удаляются через секунду, в то время как другие поля этого не делают. демонстрируют такое же поведение. Поскольку код для всех полей написан одинаковый (по моему мнению), почему так происходит и как исправить?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем коде опечатка.

Ниже приведен ваш код (опечатка 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)}
/>

Я опустошен, чувак, но огромное тебе спасибо!

Salman Arif 26.06.2024 14:31

Другие вопросы по теме