React Native登录页email字段数据绑定失败求助

问题描述 #

开发React Native登录页面时，输入邮箱和密码点击登录后，控制台输出显示Email为undefined，Password能正常获取，导致无法触发ASP.NET MVC控制器的登录方法。尝试修改服务端DTO仍未解决问题。

控制台输出：

Object {
  "Email": undefined,
  "Password": "**********!",
}

完整代码 #

import { StyleSheet } from 'react-native';
import React, {useEffect, useState} from 'react';
import {View, TextInput, TouchableOpacity} from 'react-native';
import { Text  } from '../../components/Themed';
import axios from 'axios';

export default function TabTwoScreen() {
  const [state, setState] = useState({
    email: '',
    password: ''
  })

const onPressLogin = async () => {
    var req_json = { Email: state.email, Password: state.password};

    console.log(req_json);

    var headers = 
    { 
      headers: 
      { 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/json",
          "Cache-Control": "no-cache",
          "Host": "localhost"
      }
    };

    await axios.post('http://localhost/Account/Login/', req_json, headers);
  }

  return (
    <View style={styles.container}>
      <View style={styles.inputView}>
        <TextInput
          style={styles.inputText}
          placeholder="Email"
          placeholderTextColor="#003f5c"
          onChangeText={text => setState({email: text})}
        />
      </View>
      <View style={styles.inputView}>
        <TextInput
          style={styles.inputText}
          secureTextEntry
          placeholder="Password"
          placeholderTextColor="#003f5c"
          onChangeText={text => setState({password: text})}
        />
      </View>
      <View style={styles.inputView}>
      <TouchableOpacity
        onPress = {onPressLogin}
        style={styles.loginBtn}>
        <Text>Log in.</Text>
      </TouchableOpacity>
      </View>
    </View>
)};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputView:{
    width:"80%",
    backgroundColor:"#3AB4BA",
    borderRadius:25,
    height:50,
    marginBottom:20,
    justifyContent:"center",
    padding:20
  },
  inputText:{
    height:50,
    color:"white"
  },
  loginBtn: {

  }
});

核心问题 #

更新state时未合并原有属性：每次调用setState({email: text})或setState({password: text})时，会直接替换整个state对象，导致未被修改的属性被删除。比如修改邮箱后，state只剩下email属性；修改密码后，state只剩下password属性，最终点击登录时state.email就是undefined。

修复步骤 #

修改两个TextInput的onChangeText回调，使用对象展开运算符保留原有state的所有属性，只更新需要修改的字段：

1. 邮箱输入框修改：

onChangeText={text => setState(prevState => ({...prevState, email: text}))}

2. 密码输入框修改：

onChangeText={text => setState(prevState => ({...prevState, password: text}))}

优化后的完整代码片段 #

// ...其他代码不变
return (
  <View style={styles.container}>
    <View style={styles.inputView}>
      <TextInput
        style={styles.inputText}
        placeholder="Email"
        placeholderTextColor="#003f5c"
        onChangeText={text => setState(prevState => ({...prevState, email: text}))}
        value={state.email} // 新增value属性，确保输入框与state双向同步
      />
    </View>
    <View style={styles.inputView}>
      <TextInput
        style={styles.inputText}
        secureTextEntry
        placeholder="Password"
        placeholderTextColor="#003f5c"
        onChangeText={text => setState(prevState => ({...prevState, password: text}))}
        value={state.password} // 新增value属性
      />
    </View>
    // ...其他代码不变
  </View>
)
// ...其他代码不变

额外建议 #

• 给TextInput添加value属性，保证输入框显示内容和state完全一致，避免出现输入内容与state不同步的异常。
• 可以将合并的state拆分为独立的useState变量，代码更直观：

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  

  后续更新时直接调用setEmail(text)和setPassword(text)，无需担心属性覆盖问题。

内容的提问来源于stack exchange，提问作者xccelerated99