為什么我收到無效值錯誤？

Question

我不明白我是如何得到這個錯誤的（下圖）。 在我的LoginForm.js文件中，當我將鼠標懸停在我的WebStorm IDE中時， onEmailChange(text)給我一個unresolved function or method call to onEmailChange()錯誤。 在我的index.js文件中，沒有任何錯誤被拋出。

我已經把這個問題環顧四周，但它並不完全與我的問題有關。

我已經嘗試過File > Invalidate Caches/Restart但是沒有用。

這是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

您在render()方法中定義了回調，而不是在類體內。 像這樣做：

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

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

此外，您不應該在render()方法中綁定方法。 在Component的構造函數中執行：

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

    onEmailChange(text) {
        // do something
    }

    // other methods
}

或者如果您使用babel和ES6，您可以使用箭頭函數定義回調，然后它將自動綁定：

class LoginForm extends Component {

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

    // other methods
}

另請參閱有關自動綁定的反應文檔 。

您的連接調用似乎也不正確。 如果你想發送動作emailChanged它必須如下所示：

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

connect的第三個參數需要是一個知道如何將mapStateToProps ， mapDispatchToProps和ownProps all的輸出合並到一個對象中的mapDispatchToProps ，然后ownProps對象用作連接組件的props。 我想你正試圖將該動作傳遞給mapDispatchToProps參數，這是第二個參數而不是第三個參數。 所以，基於我認為你正在做的事情，你可能想要改變你的connect線看起來像這樣。

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

然后，從您的操作文件導出該函數，而不是調用該函數的輸出。

export default emailChanged;

注意我刪除了括號，因此沒有被調用。

然后將回調函數作為類的方法並將其綁定在構造函數中。

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

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

然后在該元素上更新onChangeText 。

onChangeText={this.onEmailChange}

Answer 3

您的連接錯誤連接

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

它應該是這樣的：

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

這樣你的行動實際上就會被派遣出來

並且由評論中的emed發現：

export default emailChanged;

沒有括號。