react-native redux登录表单抛出'TypeError：无法读取未定义的属性'displayName'''

Question

TypeError: Cannot read property 'displayName' of undefined

 This error is located at: in Item (at connectStyle.js:384) in Styled(Item) (at LoginForm.js:56) in RCTView (at View.js:71) in View (at Form.js:10) in Form (at connectStyle.js:384) in Styled(Form) (at LoginForm.js:55) in RCTView (at View.js:71) in View (at View.js:9) in ViewNB (at connectStyle.js:384) in Styled(ViewNB) (at LoginForm.js:54) in LoginForm (created by Connect(LoginForm)) in Connect(LoginForm) (at App.js:24) in RCTView (at View.js:71) in View (at ScrollView.js:717) in RCTScrollView (at ScrollView.js:811) in ScrollView (at KeyboardAwareScrollView.js:27) in KeyboardAwareScrollView (at Content.js:10) in Content (at connectStyle.js:384) in Styled(Content) (at App.js:23) in RCTView (at View.js:71) in View (at Container.js:15) in Container (at connectStyle.js:384) in Styled(Container) (at App.js:21) in Provider (at App.js:20) in App (at renderApplication.js:35) in RCTView (at View.js:71) in View (at AppContainer.js:102) in RCTView (at View.js:71) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:34) <unknown> C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\native-base\\dist\\src\\basic\\Item.js:36:13 Function.remove C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\native-base\\node_modules\\lodash\\lodash.js:6997:12 Item.componentWillReceiveProps C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\native-base\\dist\\src\\basic\\Item.js:35:17 callComponentWillReceiveProps C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:5936:13 updateClassInstance C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:6134:6 updateClassComponent C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:7827:21 beginWork C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:8284:15 performUnitOfWork C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:10513:15 workLoop C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:10584:25 Object._invokeGuardedCallback C:\\xampp\\htdocs\\React\\ProfilesApp\\node_modules\\react-native\\Libraries\\Renderer\\ReactNativeRenderer-dev.js:134:9 

Here is is my Login Form

import React , {Component} from 'react';
import { StyleSheet  } from 'react-native';
import { Form, Item, Input, Label, Button,Text, View} from 'native-base';
import { connect } from 'react-redux';
import { emailChanged } from '../actions';
import { passwordChanged } from '../actions';
class LoginForm extends Component {

    onEmailChange(text) {

        this.props.emailChanged(text); // Calling the action creator
    }
    passwordChange(text) {
        this.props.passwordChanged(text);
    }
render() {
    return (
        <View>
    <Form style={styles.form}>
        <Item floatingLabel>
            <Label>email</Label>
            <Input onChangeText={this.onEmailChange.bind(this)}
            value={this.props.email}
             />
            }
        </Item>
        <Item floatingLabel last>
            <Label>Password</Label>
            <Input secureTextEntry
             onChangeText={this.passwordChange.bind(this)}
            />
        </Item>
    </Form>

    </View>
    );
}   

}


const mapStateToProps = state =>{
    return {
        email: state.auth.email,

    };
};
export default  connect(mapStateToProps , {emailChanged})(LoginForm);

My AuthReducer

export default (state = INITIAL_STATE, action ) => {
    console.log(action.payload);
    switch (action.type) {
        case EMAIL_CHANGED :

         return { ...state, email: action.payload};
        default: 
        return state;
    }
}

Action Creator

import { EMAIL_CHANGED } from './types';
export const emailChanged = (text) => {
    return {
        type: EMAIL_CHANGED,
        payload: text
    }
}

I don't get this error when empty my onEmailChange(text) function, which calls in the action creator. Is that problem related to native-base? Am I doing something wrong with my action creator?

Edit: I forgot to add, I get this error everytime I type into the input field

Answer 1

I got it. It's a rogue brace inside my render function

  <Item floatingLabel>
            <Label>email</Label>
            <Input onChangeText={this.onEmailChange.bind(this)}
            value={this.props.email}
             />
            }  <----
        </Item>