Функция useState возвращает старое значение, как можно исправить?

Question

[vladislav3101]

const SignUpContainer = () => {
  const [values, setValues] = useState({
    email: '',
    login: '',
    password: '',
    password2: '',
  });

  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validateSignUp(values));
    if (Object.keys(errors).length === 0) {
      console.log('Ошибок нет');
    } else {
      console.log('Ошибки есть');
    }
  };

  return (
    <FormSignUp
      handleChange={handleChange}
      handleSubmit={handleSubmit}
      values={values}
      errors={errors}
    />
  );
};

export default SignUpContainer;

Функция validateSignUp возвращает объект ошибок, когда я отправляю форму state errors возвращается старый. При отправки формы в 2-ой раз приходит как раз state новый. Как можно решить проблему?

Comments

[Дмитрий]

когда я отправляю форму state errors возвращается старый

Куда возвращается? Просто пометьте место в коде, где вы ожидаете новое значение а получаете старое. Чаще всего это происходит потому, что вам кажется будто после setErrors значение переменной errors должно немедленно измениться на установленное, что конечно же не так.

[vladislav3101]

Дмитрий, почему так происходит? Статью может какую почитать. Я решил эту проблему обернув setErrors в доп.функцию, где просто возвращаю true/false

[Дмитрий]

vladislav3101,

Я решил эту проблему обернув setErrors в доп.функцию.

Покажите результат

Answer 1

[vladislav3101]

const SignUpContainer = () => {
  const [values, setValues] = useState({
    email: '',
    login: '',
    password: '',
    password2: '',
  });

  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

   const isValid = () => {
    const errors = validateSignUp(values);
    if (Object.keys(errors).length > 0) {
      setErrors(errors);
      return false;
    }
    return true;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid()) {
      setErrors({});
      console.log('Ошибок нет');
    } else {
      console.log('Ошибки есть');
    }
  };

  return (
    <FormSignUp
      handleChange={handleChange}
      handleSubmit={handleSubmit}
      values={values}
      errors={errors}
    />
  );
};

export default SignUpContainer;