Хук React.useState() не отражает новое значение
ВОПРОС: Почему моя функция setContact() не работает?
Моя декларация хука:
const [contact, setContact] = useState({
fName: "",
lName: "",
email: ""});
Мой элемент пользовательского интерфейса:
<input
name = "email"
placeholder = "Email"
onChange = {catchEmail}
value = {contact.email}
/>
Мой обработчик onChange:
function catchEmail(event) {
const { value: email } = event.target;
setContact((prevValue) => {
prevValue.email += email;
return prevValue;
});
}
Я знаю, как заставить его работать, но я хочу понять, что не так с этим кодом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Изменение DOM (иногда) дорого. React, понимая это, не выполняет повторный рендеринг компонентов, если новое состояние точно такое же (===), что и старое состояние.
Здесь, поскольку вы изменяете существующее состояние и возвращаете его, новое состояние — это тот же объект, что и старое состояние, поэтому React пропускает повторный рендеринг.
Вам нужно вернуть новый объект, чтобы React знал, что нужно выполнить повторный рендеринг.
setContact(prevValue => ({
...prevValue,
email
}));
(вы не хотите конкатенировать существующее значение email, вы почти наверняка хотите установить новое значение состояния email в новое полное входное значение)
Вы также можете избежать этой проблемы, разделив различные значения состояния, например, do:
const [email, setEmail] = useState('');
onChange = {e => setEmail(e.target.vaue)}
как обычно рекомендуется с крючками.
Спасибо! Оператор спреда работает. Я ценю ваше время и помощь!
Или, если вы хотите сохранить свое состояние в одном объекте, иметь взаимозависимость между битами этого состояния при обновлении или зависеть от предыдущего состояния при установке следующего,
useReducer— лучший способ справиться с этим. reactjs.org/docs/….