Невозможно изменить состояние поля ввода реакции, всегда заканчивается начальным значением
Это функция редактирования профиля, которую я пытаюсь создать. Сначала я получаю данные пользователя и заполняю поля, назначая их состоянию
const [name, setName] = useState('')
useEffect(() => {
if (localStorage.getItem('userInfo') === null) {
navigate('/login')
}
else{
userInfo=JSON.parse(localStorage.getItem('userInfo'))
setName(userInfo.name)
}
},)
до сих пор все в порядке, я вижу имя в поле ввода по умолчанию
<Form onSubmit = {submitHandler}>
<Form.Group controlId='name'>
<Form.Label>Name</Form.Label>
<Form.Control
type='name'
placeholder='Enter name'
defaultValue = {name}
onChange = {(e) => setName(e.target.value)}
></Form.Control>
</Form.Group>
</Form>
когда я отправляю форму, я все еще отправляю на сервер исходное значение, а не отредактированное значение.
const submitHandler = async (e) => { e.preventDefault() if (password !== confirmPassword) { setMessage('Пароли не совпадают') } else { const formData = {name} updateResponse=wait updateUser(formData); console.info(updateResponse) } }
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Замените defaultValue на value
и используйте useEffect таким образом React useState
если я заменю значением, я даже не смогу редактировать поле ввода
Реакция выдает какие-либо ошибки? Консоль проверяли?
нет, но теперь я знаю, почему это происходит. каждый раз, когда я меняю входное поле, состояние изменяется, и компонент перерисовывается, очевидно, useEffect запускается снова и устанавливает значение в исходное значение.
я думаю теперь использовать useRef вместо usestate
Возможно, вам нужно вызвать useEffect только при первом рендеринге компонента, добавив [] в массив зависимостей useEffect.
Вам нужно добавить функцию в onChange Param. Я добавил пример кода.
export default function App() {
const [name, setName] = useState(""); // useState hook
// handle change event
const handleChangeEvent = (e) => {
e.preventDefault(); // prevent the default action
setName(e.target.value); // set name to e.target.value (event)
};
// render
return (
<div>
<Form>
<Form.Group>
<Form.Control
defaultValue = {name}
type = "name"
onChange = {handleChangeEvent}
></Form.Control>
</Form.Group>
</Form>
</div>
);
}
Что вы имеете в виду под You need to add function to onChange Param?
Было бы лучше, если бы вы добавили функцию, а не добавляли переменную useState напрямую. И еще одно, не забудьте запретить действие по умолчанию и установить значение. Это очень важно.
Вы видели ответ @Tarmah выше?
Не могли бы вы показать функцию отправки формы?