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

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

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

Why the state didn't update? React Native

reactjs

react-native

react-native-android