[英]Objects are not valid as React-Child > use an array instead exception
I recently started to learn React-Native and I'm trying to create an authorization application right now.我最近开始学习 React-Native 并且我现在正在尝试创建一个授权应用程序。 But when I tried to create a login form component I got an error like: "Objects are not valid as a React Child..."
但是当我尝试创建一个登录表单组件时,我收到了一个错误,例如:“对象作为 React Child 无效......”
Here is my complete.js file:这是我的 complete.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;
I'm expecting to create a basic login page with user input email and password.我期望使用用户输入 email 和密码创建一个基本登录页面。 But couldn't create it.
但无法创建它。 I also import this form component which I showed you on top into my App.js just simple is that.
我还将我在顶部向您展示的这个表单组件导入到我的 App.js 中,就是这么简单。
You should update render function like this.您应该像这样更新渲染 function。
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>
);
}
Oh, after a few hours I found a solution which is a quite newbie mistake.哦,几个小时后,我找到了一个非常新手错误的解决方案。 Just pass all contents inside of <TextInput 'here' /> instead of 'here'
只需传递 <TextInput 'here' /> 内的所有内容,而不是 'here'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.