useForm в реагирует неправильно для двух обновлений вручную

Question

Я новичок в React. Я использовал крючок в соответствии с инструкциями Бена Авада в этом видео . Код моего хука useForm следующий:

import { useState } from 'react';

// eslint-disable-next-line import/prefer-default-export
export const useForm = initialValues => {
  const [values, changeValue] = useState(initialValues);
  const func = e => {
    changeValue({ ...values, [e.target.name]: e.target.value });
  };
  return [values, func];
};

Он работал отлично, но я столкнулся с одной проблемой, когда мне пришлось вручную обновлять состояние. Я объявил состояние следующим образом.

 const [inputs, changeInputs] = useForm({ name:'', email: '', password: '', mobile: '' });

и изменил значения во входном теге, как показано ниже (Это также хорошо работало): -

<input onChange={changeInputs} type="email" name="email" value={inputs.email} placeholder="Enter E-mail address" />

Когда я обновлял только один значение состояния вручную внутри функции, оно работало нормально (код ниже)

const handleRegister = event => {
  event.prevenDefault();
  changeInputs({ target: { name: 'mobile', value: '1111111111' } });
  //changeInputs({ target: { name: 'name', value: 'Anuj' } });
}

Но когда я раскомментировал 4-ю строку кода выше, обновлялось только name мобильное значение совпадает со значением по умолчанию.

Edit1 - Код fun c = (e) =>

const func = (e) => {
 changeValue(values => { return { ...values, [e.target.name]: e.target.value }});
 // changeValue({ ...values, [e.target.name]: e.target.value });
};

EDIT2 - Решение (Stati c Solution) Просто измените useForm, как показано ниже

import { useState } from 'react';

// eslint-disable-next-line import/prefer-default-export
export const useForm = initialValues => {
 const [values, changeValue] = useState(initialValues);
 const func = (e) => {
  console.log(e.type);
  if(e.type==='change')
   changeValue({ ...values, [e.target.name]: e.target.value });
  else
   changeValue(state => { return { ...state, [e.target.name]: e.target.value }});
 };
return [values, func];
};

EDIT3 - Простое и приятное решение Посетите для решения от HermitCrab или просто измените функцию fun c, как показано ниже.

 const func = (e) => {
  const {name,value} = e.target;
  changeValue(state => { return { ...state, [name]: value }});
 };

Answer 1

changeValue является асинхронным, поэтому, когда ваш вызов changeInputs дважды подряд, вот что происходит:

// 1st call: values is { name:'', email: '', password: '', mobile: '' }
changeValue({ ...values, mobile: '1111111111' });

// 2nd call: values still is { name:'', email: '', password: '', mobile: '' }
changeValue({ ...values, name: 'Anuj' });

Таким образом, будет сохранен только второй вызов:

values: { name: 'Anuj', email: '', password: '', mobile: '' }

Чтобы решить эту проблему, вам нужно изменить useForm.changeValue:

const { name, value } = e.target;
changeValue(state => { return { ...state, [name]: value }});