React Native开发登录表单报Objects are not valid as React Child错误

• 触发Objects are not valid as a React Child...报错的直接原因是TextInput的属性书写位置完全错误。React组件的所有配置属性（props）必须写在组件的开标签内部，你当前把placeholder、style、value这类属性全部写在了<TextInput>和</TextInput>的闭合标签中间，这部分内容会被React识别为组件的子节点。其中style传入的是一个JS对象，React无法直接将对象作为UI内容渲染，因此抛出该错误。
• 状态更新逻辑错误：onChangeText回调中直接将输入的字符串传给this.setState。React的setState要求传入需要更新的状态键值对对象，直接传字符串会导致状态无法正确同步，甚至引发后续渲染异常。
• 功能逻辑bug：第二个输入框的placeholder仍然配置为"Email"，和密码输入的实际场景不匹配。

import React, {Component} from 'react';
import {View, TextInput} from 'react-native';
import Button from './common/Button';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {email: '', password: ''};
  }
  render() {
    const {containerStyle, subContainerStyle, inputStyle} = styles;
    return (
      <View style={containerStyle}>
        <View style={subContainerStyle}>
          {/* 所有props移至开标签内部 */}
          <TextInput
            placeholder="Email"
            style={inputStyle}
            value={this.state.email}
            onChangeText={(text) => this.setState({email: text})}
            autoCapitalize="none"
            autoCorrect={false}
          />
        </View>
        <View style={subContainerStyle}>
          <TextInput
            placeholder="Password"
            style={inputStyle}
            value={this.state.password}
            onChangeText={(text) => this.setState({password: text})}
            secureTextEntry
            autoCapitalize="none"
            autoCorrect={false}
          />
        </View>
        <View style={subContainerStyle}>
          <Button onPress={() => console.log('pressed')}>Login</Button>
        </View>
      </View>
    );
  }
}

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  },
  subContainerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative',
  },
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 2,
  },
};

export default LoginForm;

交互优化说明：

• 输入框补充了autoCapitalize="none"、autoCorrect={false}配置，避免输入邮箱时自动大写、自动纠错的异常交互
• 密码框补充了secureTextEntry属性，符合登录场景下隐藏明文输入的常规安全交互要求

内容的提问来源于stack exchange，提问作者Taha Ateş