对象作为 React-Child 无效 > 使用数组代替异常

Posted 2023-02-23

【中文标题】对象作为 React-Child 无效 > 使用数组代替异常

【英文标题】：Objects are not valid as React-Child > use an array instead exception

【发布时间】：2021-06-04 05:59:03

【问题描述】：

我最近开始学习 React-Native，我现在正在尝试创建一个授权应用程序。但是当我尝试创建一个登录表单组件时，我收到了如下错误：“Objects are not valid as a 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 中，很简单。

【参考方案1】：

你应该像这样更新渲染函数。

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>
    );
  

【参考方案2】：

哦，几个小时后，我找到了一个非常新手错误的解决方案。只需传递 内的所有内容，而不是 'here'

【讨论】：

正如上面 Vinay Singh 所指出的，在 setState 函数中，捕获的电子邮件或密码应设置为对象键，而不是直接参数。错误：email => this.setState(email)，正确：(email) => this.setState( email )

谢谢，在我写这句话的时候，我遇到了一个错误，你在 4 小时前给出了解决方案。谢谢！