javascript - 对象作为 React-Child 无效 > 使用数组代替异常
问题描述
我最近开始学习 React-Native,我现在正在尝试创建一个授权应用程序。但是当我尝试创建一个登录表单组件时,我收到了一个错误,例如:“对象作为 React Child 无效......”
这是我完整的 .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;
我期望使用用户输入的电子邮件和密码创建一个基本的登录页面。但无法创建它。我还将我在顶部向您展示的这个表单组件导入到我的 App.js 中,就是这么简单。
解决方案
您应该像这样更新渲染功能。
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>
);
}
推荐阅读
- java - 我无法使用我的变量,它给了我错误“无法对非静态字段进行静态引用”
- android - 带有 Ionic 框架的 Firebaseui 无法在 android 上运行
- conda - 在 YAML 中为 conda 环境配置指定版本号和“cpuonly”选项
- javascript - 如何在 CRM 365 中的 BPF 中获取完成按钮事件?
- reactjs - react-i18next 仅在构建中给出 missingKey 错误
- python - 有没有更好的方法来添加营养成分模型
- r - 如何测试 xml 文件中是否存在节点(字符串)以在循环中使用以从多个文件中提取数据?
- go - 如何将特定通道分配给空接口通道
- javascript - JS:为什么 [] + "abc" 会产生一个包含 3 个字母元素的数组?
- django-cms - 通过 django-cms API 创建的页面 404