Почему государство не обновило? React Native

Question

Я попытался сделать простую проверку формы. Если имя пользователя и пароль не пусты при нажатии кнопки, на экране отображается сообщение. Но сообщение появляется только когда я нажимаю кнопку дважды, когда два поля не пусты, почему?

export default function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [usernameError, setUsernameError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);
  const [loginMessage, setLoginMessage] = useState('');

  async function handleLogin() {
    if (username === '') {
      setUsernameError('Username field is empty');
    } else {
      setUsernameError('');
    }

    if (password === '') {
      setPasswordError('Password field is empty');
    } else {
      setPasswordError('');
    }

    if (usernameError === '' && passwordError === '') {
      setLoginMessage(`Hello ${username} you have successfully logged in!`);
    } else {
      setLoginMessage('');
    }
  }

return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <Text style={styles.header}>Login Panel</Text>
        <Text>{loginMessage}</Text>
        <TextInput
          style={usernameError ? styles.validationError : styles.textInput}
          placeholder='username'
          onChangeText={text => setUsername(text)}
        />
        <Text style={{ color: 'red' }}>{usernameError}</Text>
        <TextInput
          style={passwordError ? styles.validationError : styles.textInput}
          placeholder='password'
          secureTextEntry
          onChangeText={text => setPassword(text)}
        />
        <Text style={{ color: 'red' }}>{passwordError}</Text>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.Button} onPress={handleLogin}>
            <Text style={styles.ButtonText}>Login</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Button}>
            <Text style={styles.ButtonText}>Logout</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

// ...

Answer 1

В отличие от компонентов, вызовы функций не перерисовываются после изменения состояния, поэтому значение usernameError из вашего состояния такое же, как и до его изменения.

Попробуйте это

async function handleLogin() {
    var errorUsername = ''
    var errorPassword = ''
    if (username === '') {
      setUsernameError('Username field is empty');
      errorUsername = 'Username field is empty'
    } else {
      setUsernameError('');
    }

    if (password === '') {
      setPasswordError('Password field is empty');
      errorPassword = 'Password field is empty'
    } else {
      setPasswordError('');
    }

    if (errorUsername === '' && errorPassword === '') {
      setLoginMessage(`Hello ${username} you have successfully logged in!`);
    } else {
      setLoginMessage('');
    }
  }