Javascript 对象作为子对象无效>；使用数组代替异常

我最近开始学习React Native，现在我正在尝试创建一个授权应用程序。但当我试图创建一个登录表单组件时，我遇到了一个错误，如：“对象作为子对象无效…”

这是我完整的.js文件：

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}>
          <TextInput>
            placeholder="Email" style = {inputStyle}
            value = {this.state.email}
            onChangeText= {(email) => this.setState(email)}
          </TextInput>
        </View>
        <View style={subContainerStyle}>
          <TextInput>
            placeholder="Email" style = {inputStyle}
            value = {this.state.password}
            onChangeText= {(password) => this.setState(password)}
          </TextInput>
        </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;

import React，{Component}来自'React'；
从“react native”导入{View，TextInput}；
从“./common/Button”导入按钮；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={电子邮件：''，密码：'}；
}
render（）{
const{containerStyle，subcainerStyle，inputStyle}=样式；
返回(
占位符=“电子邮件”样式={inputStyle}
值={this.state.email}
onChangeText={（电子邮件）=>this.setState（电子邮件）}
占位符=“电子邮件”样式={inputStyle}
值={this.state.password}
onChangeText={（密码）=>this.setState（密码）}
console.log（'pressed'）}>Login
);
}
}
常量样式={
集装箱运输方式：{
边框宽度：1，
边界半径：2，
边框颜色：'#ddd'，
边框底部宽度：0，
阴影颜色：“#000”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0.1，
阴影半径：2，
立面图：1，
边缘左：5，
marginRight:5，
玛金托普：10，
},
分包商风格：{
边界宽度：1，
填充：5，
背景颜色：“#fff”，
justifyContent:“flex start”，
flexDirection:'行'，
边框颜色：'#ddd'，
位置：'相对'，
},
输入样式：{
颜色：“#000”，
paddingRight:5，
paddingLeft:5，
尺码：18，
线高：23，
弹性：2，
},
};
导出默认登录信息；

---

我希望创建一个基本的登录页面，用户输入电子邮件和密码。但无法创建它。我还将上面展示的表单组件导入到我的App.js中。很简单。

哦，几个小时后，我找到了一个解决方案，这是一个新手犯的错误。只需在中传递所有内容，而不是“here”

您应该像这样更新渲染函数

render() {
    const {containerStyle, subContainerStyle, inputStyle} = styles;
    return (
      <View style={containerStyle}>
        <View style={subContainerStyle}>
          <TextInput
            placeholder="Email"
            style = {inputStyle}
            value = {this.state.email}
            onChangeText= {(email) => this.setState({ email })}
          />
        </View>
        <View style={subContainerStyle}>
          <TextInput
            placeholder="Password"
            style = {inputStyle}
            value = {this.state.password}
            onChangeText= {(password) => this.setState({password})}
          />
        </View>
        <View style={subContainerStyle}>
          <Button onPress={() => console.log('pressed')}>Login</Button>
        </View>
      </View>
    );
  }

render（）{
const{containerStyle，subcainerStyle，inputStyle}=样式；
返回(
this.setState（{email}）}
/>
this.setState（{password}）}
/>
console.log（'pressed'）}>Login
);
}

正如上面Vinay Singh所指出的，在

setState

函数中，捕获的电子邮件或密码应设置为对象键，而不是直接参数。错：email=>this.setState（email），对：（email）=>this.setState（{email}）谢谢，当我写这句话的时候，我遇到了一个错误，你在4小时前给出了解决方案。非常感谢。