Как сделать выполнения console.log лишь после того как данные записались?

Question

const [data, setData] = useState({
    email: "",
    password: "",
    passwordCheck: "",
    phone: "",
    username: "",
    address: ""
  })

const onChangeHandler = (event) => {
    setData({...data, [event.target.name]: event.target.value})
    console.log(data)
  }

<label>E-mail*</label>
            <input type="email" onChange={onChangeHandler} defaultValue={data.email} name="email"/>
            <div className="form-error"></div>

При вводе в input данные сохраняются в state. НО console.log(data) показывает с опозданием в одно действия( Хотя стоит после setData) к примеру если я напишу в input Test то console.log покажет что в state лишь Tes И за чего такая ошибка или где можно выполнить console.log лишь после обновления state. Важно для валидации

Answer 1

setDate выполняется асинхронно потому и показывает неактуальный результат.

Можно написать useEffect, для того чтобы получить актуальный результат.

useEffect(() => {
   console.log(data)
}, [data]);

Но так тоже впихивать целый объект в массив зависимостей не хорошая идея. Лучше использовать определенные поля этого объекта.

useEffect(() => {
   console.log(data.email)
}, [data.email]);

БЛОГ НА HUSL

Как сделать выполнения console.log лишь после того как данные записались?

Ответы (1 шт):