SetState не работает на onSubmit в окончательной форме React

Question

Я столкнулся с проблемой при обновлении состояния с помощью setContactInfo / setPassword для функции onSubmit. Кто-нибудь может мне помочь?

Это окончательная форма реакции

<Form
  onSubmit={onSubmit}
  validate={validation}
  render={({ handleSubmit, form, submitting, pristine, values }) => (
    <form onSubmit={handleSubmit}>
      <FormGroup>
        <Field name='contactInfo'>
          {({ input, meta }) => (
            <div className='erow'>
              <Input
                {...input}
                type='text'
                id='contactInfoID'
                placeholder='Email / Phone number'
              />
              {errorShowing(meta)}
            </div>
          )}
        </Field>
        <Field name='password'>
          {({ input, meta }) => (
            <div className='erow'>
              <Input
                {...input}
                type='password'
                id='passwordID'
                placeholder='Password'
              />
              {errorShowing(meta)}
            </div>
          )}
        </Field>
      </FormGroup>
      <FormGroup>
        <div className='submit-btn text-center'>
          <Button
            type='submit'
            id='submitID'
            className='btn btn-dark px-5 py-2'
            disabled={submitting}
          >
            Signup
          </Button>
        </div>
      </FormGroup>
    </form>
  )}
></Form>

И это функции.

  ...................
  ...................

  const [contactInfo, setContactInfo] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (values) => {
    console.log(values);
    setContactInfo(values.contactInfo);
    setPassword(values.password);
    console.log(contactInfo, password);
    window.alert(JSON.stringify({ contactInfo, password }, 0, 2));
  };

  ..............
  ..............

Здесь setContactInfo и setPassword не обновляют состояние. Я не знаю почему. Кто-нибудь может объяснить и сказать мне, как решить эту проблему?

Answer 1

Поскольку setContactInfo и setPassword имеют асинхронный характер c, поэтому вы не можете прочитать обновленные значения после вызова этого метода. Попробуйте

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