为什么我收到无效值错误？

Question

I don't understand how I'm getting this error (pic below). In my LoginForm.js file, the onEmailChange(text) is giving me an unresolved function or method call to onEmailChange() error when I hover over it in my WebStorm IDE. In my index.js file, no error is being thrown anywhere.

I've looked around SO for this issue but it doesn't fully pertain to my problem.

I've tried File > Invalidate Caches/Restart but that didn't work.

Here's App.js :

import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import firebase from 'firebase';
import reducers from './reducers';
import LoginForm from './components/common/LoginForm';

class App extends Component {
    render() {
        return(
            <Provider style={styles.c} store={createStore(reducers)}>
                <LoginForm/>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    c: {
        flex: 1
    }
});


export default App;

Here's LoginForm.js :

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {emailChanged} from 'TorusTeensApp/src/actions';
import {Text, StyleSheet, KeyboardAvoidingView, TextInput, TouchableOpacity} from 'react-native';

class LoginForm extends Component {
    render() {
        onEmailChange(text)
        {
            this.props.emailChanged(text);
        }

        return(
            <KeyboardAvoidingView style={styles.container}>
                <TextInput
                    style={styles.userInput}
                    onsubmitediting={() => this.passwordInput.focus()}
                    returnKeyType={"next"}
                    placeholder={"Email"}
                    label={"Email"}
                    keyboardType={"email-address"}
                    autoCorrect={false}
                    onChangeText={this.onEmailChange.bind(this)}
                    value={this.props.email}
                />

                <TextInput
                    style={styles.userInput}
                    ref={(userInput) => this.passwordInput = userInput}
                    returnKeyType={"go"}
                    placeholder={"Password"}
                    label={"Password"}
                    secureTextEntry
                />

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text style={styles.buttonText}>Create Account</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20 // creates a gap from the bottom
    },

    userInput: {
        marginBottom: 20,
        backgroundColor: '#9b42f4',
        height: 40
    },

    buttonContainer: {
        backgroundColor: '#41bbf4',
        paddingVertical: 10,
        marginBottom: 20
    },

    buttonText: {
        textAlign: 'center',
        color: '#FFFFFF'
    }
});

const mapStateToProps = state =>  {
  return {
      email: state.auth.email
  };
};
export default connect(mapStateToProps, null, {emailChanged}) (LoginForm);

Here's index.js :

import {EMAIL_CHANGED} from './types';

export const emailChanged = (text) => {
    return {
        type: 'EMAIL_CHANGED',
        payload: text
    };
};

export default emailChanged();

Answer 1

You defined your callback inside your render() method and not inside the class body. Do it like this:

class LoginForm extends Component {
    onEmailChange(text) {
            this.props.emailChanged(text);
    }        

    render() {
       return(...);
    }
}

Also you shouldn't bind methods inside your render() method. Do it in the constructor of your Component:

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.onEmailChange.bind(this);
    }

    onEmailChange(text) {
        // do something
    }

    // other methods
}

Or if you use babel and ES6, you can define your callback with an arrow function, then it will be automatically bound:

class LoginForm extends Component {

    onEmailChange = text => {
        // do something
    };

    // other methods
}

See also the react docs about autobinding .

Also your call to connect seems incorrect. If you want to dispatch the action emailChanged it has to look like this:

const mapStateToProps = state =>  {
    return {
        email: state.auth.email
    };
};

const mapDispatchToProps = dispatch => {
    // this put a function emailChanged into your props that will dispatch the correct action
    emailChanged: text => dispatch(emailChanged(text))
}; 

const LoginFormContainer = connect(mapStateToProps, mapDispatchToProps)(LoginForm);    

export default LoginFormContainer;

Answer 2

The third argument to connect needs to be a function that knows how to merge the output of mapStateToProps , mapDispatchToProps , and ownProps all into one object that is then used as props for your connected component. I think you're trying to pass that action to the mapDispatchToProps argument, which is the second argument not the third. So, based on what I think you're doing, you probably wanna change your connect line to look like this.

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

Then, export the function from your actions file not the output of calling that function.

export default emailChanged;

Notice I removed the parentheses so it's not being called.

Then make the callback function a method on your class and bind it in the constructor.

constuctor(props) {
  super(props);
  this.onEmailChange = this.onEmailChange.bind(this);
}

onEmailChange(text) {
  this.props.emailChanged(text);
}

Then update onChangeText on that element.

onChangeText={this.onEmailChange}

Answer 3

Your connect is miswired

connect(mapStateToProps, null, {emailChanged}) (LoginForm);

It should be something like:

connect(mapStateToProps, 
       (dispatch) => ({emailChanged: (text) => dispatch(emailChanged(text))}) 
)(LoginForm);

so that your action actually gets dispatched

and as spotted by emed in comment:

export default emailChanged;

without parentheses.