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

Question

我不明白我是如何收到此错误的(下图)。在我的 LoginForm.js 文件中，当我将鼠标悬停在 onEmailChange(text) 上时，会出现 unresolved function or method call to onEmailChange() 错误在我的 WebStorm IDE 中对其进行处理。在我的 index.js 文件中，任何地方都没有抛出错误。

我已经四处寻找这个问题，但它并不完全适合我的问题。

我尝试过文件 > 使缓存无效/重新启动，但没有成功。

这是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;

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

这是index.js:

import {EMAIL_CHANGED} from './types';

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

export default emailChanged();

Answer 1

您的连接错误

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

应该是这样的:

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

以便您的操作真正得到调度

正如 emed 在评论中发现的那样:

export default emailChanged;

不带括号。