为什么状态没有更新？ 反应本机

Question

I tried to do a simple form validation. If the field username and password aren't empty when the button is pressed, a message is shown in the screen. But the message appear only when I press the button twice, ever when the two fields aren't empty, why?

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

Unlike components, function calls didn't re-render after state change, so the value of usernameError from your state is the same as before you changed it.

Try this

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('');
    }
  }