Значения состояния реакции пусты внутри обратного вызова из собственного события

Question

У меня есть следующий компонент:

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleUserKeyPress = useCallback((event) => {
    if (event.keyCode === 13) {
      doLogin({ username, password }, loginDispatch, callback);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('keypress', handleUserKeyPress);
  }, [handleUserKeyPress]);

      <ProjectFormField
        label={t('email')}
        formInputProps={{
          value: username,
          onChange: (event) => setUsername(event.target.value),
        }}
        inputType="email"
      />

      <ProjectFormField
        label={t('password')}
        formInputProps={{
          value: password,
          onChange: (event) => setPassword(event.target.value),
        }}
        type="passwordField"

      />

     <Button
        label={'loginEnter'}
        id="login-button"
        disabled={ !username || !password}
        onClick={() => {
          doLogin({ username, password });
        }}
        
      />

     

*** Где ProjectFormField - это наша настраиваемая оболочка приложения для компонента текстового поля пользовательского интерфейса материала

Когда я нажимаю кнопку, значения имени пользователя и пароль существует в состоянии. Когда я нажимаю кнопку ввода, функция обратного вызова работает, но значения в состоянии пусты. Я также попробовал решение с userRef, где ref был контейнером-оболочкой компонента входа в систему, но результат был таким же. Что я делаю не так?

Answer 1

вы можете использовать здесь useRef хук. Вот ссылка на codeandbox, на которую вы можете ссылаться: https://codesandbox.io/s/exciting-framework-mprqg?file= / src / index. js