Реагировать на обновление данных формы

У меня есть следующий код:

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: ""}
    )
    
    console.info(formData.comments)
    
    function handleChangeEvent(event) {
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [event.target.name]: event.target.value
            }
        })
    }
    
    return (
        <form>
            <input
                type = "text"
                placeholder = "First Name"
                onChange = {handleChangeEvent}
                name = "firstName"
                value = {formData.firstName}
            />
        </form>
    )
}

Я пытаюсь понять несколько аспектов этого, в которых я не на 100%, и был бы признателен, если бы кто-нибудь мог посоветовать.

Мое понимание порядка операций таково:

  1. Пользователь вводит текст в поле ввода
  2. onChange запускается и запускает обратный вызов handleChangeEvent
  3. Выполняется обратный вызов изменения дескриптора. Это запускает функцию установки, которая изменяет состояние.
  4. Компонент формы перерисовывается из-за запущенной функции установки.

Я считаю, что это правильно, но это приводит меня в некоторую путаницу:

  1. Как console.info(formData.comments) запускается каждый раз, когда вносятся изменения? Это происходит при повторном рендеринге компонента формы? И если да, то почему const [formData, setFormData] = React.useState({firstName: ""}); тоже не сбрасывается каждый раз?

  2. Когда моя функция handleChangeEvent запускается, она запускает обратный вызов, который возвращает идентичный объект, за исключением того, что мы переназначаем одно свойство, а именно: [event.target.name] : event.target.value. Если event.target.name и event.target.value поступают из того, что я передаю компоненту ввода, и value = {formData.firstName}, как мое состояние когда-либо обновляется? Так как я набираю в поле новый символ, но состояние не обновляется, а значит и значение не обновляется, значит надо использовать старое значение.

  3. Где я могу просмотреть дополнительную информацию о событии, которое передается моей функции-обработчику?

Спасибо всем, кто может помочь, я ценю это!

Поведение ключевого слова "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) для оценки ваших знаний,...
2
0
1 067
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Оператор console выполняется из-за повторного рендеринга компонента. Так как formData является состоянием и использует API useState, он не предназначен для повторной инициализации. Вот как работает реакция, поскольку она сравнивает DOM для отображения новых изменений.
  2. Вызывается setFormData, и хотя он по-прежнему содержит предыдущее значение, поскольку вы жестко кодируете входное значение, которое такое же, как и раньше, но поскольку вызывается метод api set для useState, компонент привязан к повторному рендерингу. Опять же, как работает реакция
  3. Вы всегда можете консольно зарегистрировать событие, которое вы передали внутри обработчика.

Привет Тармах, спасибо за ваш ответ. 1 и 3 имеют смысл и отвечают на мои вопросы. Я все еще немного запутался по поводу 2. Если setFormData вызывается для предыдущего значения, когда компонент повторно отображает, должен ли он не отображать старые данные?

713sean 24.11.2022 02:21

Поэтому всякий раз, когда вы вызываете метод установки API useState, даже если значение такое же, как и старое, компонент все равно будет повторно отображаться, и будет установлен новый объект с теми же значениями. Хотя значения будут те же, но будет установлен новый объект. Другими словами, будет установлен новый экземпляр объекта с теми же значениями.

Tarmah 24.11.2022 02:23

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