У меня есть следующий код:
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%, и был бы признателен, если бы кто-нибудь мог посоветовать.
Мое понимание порядка операций таково:
Я считаю, что это правильно, но это приводит меня в некоторую путаницу:
Как console.info(formData.comments)
запускается каждый раз, когда вносятся изменения? Это происходит при повторном рендеринге компонента формы? И если да, то почему const [formData, setFormData] = React.useState({firstName: ""});
тоже не сбрасывается каждый раз?
Когда моя функция handleChangeEvent запускается, она запускает обратный вызов, который возвращает идентичный объект, за исключением того, что мы переназначаем одно свойство, а именно: [event.target.name] : event.target.value
. Если event.target.name и event.target.value поступают из того, что я передаю компоненту ввода, и value = {formData.firstName}
, как мое состояние когда-либо обновляется? Так как я набираю в поле новый символ, но состояние не обновляется, а значит и значение не обновляется, значит надо использовать старое значение.
Где я могу просмотреть дополнительную информацию о событии, которое передается моей функции-обработчику?
Спасибо всем, кто может помочь, я ценю это!
Поэтому всякий раз, когда вы вызываете метод установки API useState, даже если значение такое же, как и старое, компонент все равно будет повторно отображаться, и будет установлен новый объект с теми же значениями. Хотя значения будут те же, но будет установлен новый объект. Другими словами, будет установлен новый экземпляр объекта с теми же значениями.
Привет Тармах, спасибо за ваш ответ. 1 и 3 имеют смысл и отвечают на мои вопросы. Я все еще немного запутался по поводу 2. Если setFormData вызывается для предыдущего значения, когда компонент повторно отображает, должен ли он не отображать старые данные?