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

时间:2017-06-27 14:17:55

标签: javascript ios reactjs react-native redux

我不明白我是如何得到这个错误的(如下图)。在我的LoginForm.js文件中,onEmailChange(text)在我的unresolved function or method call to onEmailChange() IDE中将鼠标悬停在WebStorm上时发出index.js错误。在我的File > Invalidate Caches/Restart文件中,没有任何错误被抛出。

我已经把这个问题环顾四周,但它并不完全与我的问题有关。

我已经尝试了App.js但是没有用。

enter image description here

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

table1
----------
t1id |  t1field1  |  t1field2

table2
----------
t2id |  t1id  |  t2field1  |  

outputTable3
----------
t1id  |  t2field1(row1)  |t2field1(row2) | t2field1 (row...)

3 个答案:

答案 0 :(得分:0)

您在from collections import defaultdict def test(file_name): open_fnc = defaultdict(open) open_fnc['.gz'] = gzip.open f_csv = csv.reader(i.TextIOWrapper(open_fnc[file_name.lower()[-3:]]())) # will invoke `open` for anything besides `.gz` files. 方法中定义了回调,而不是在类体内。这样做:

<View style={{ flexDirection: 'row', flexWrap: 'wrap', height: 15, backgroundColor: 'yellow', overflow:'hidden' }}>
    <Text>
        Text with unknown length
    </Text>
    <Text>
        Some more text with!
    </Text>
    <Text>
        this should be hidden if the above text is too long
    </Text>
</View>

此外,您不应该在render()方法中绑定方法。在Component的构造函数中执行:

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

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

或者如果您使用babel和ES6,您可以使用箭头功能定义回调,然后它将自动绑定:

render()

另请参阅react docs about autobinding

您的连接电话似乎也不正确。如果您要发送操作class LoginForm extends Component { constructor(props) { super(props); this.onEmailChange.bind(this); } onEmailChange(text) { // do something } // other methods } ,则必须如下所示:

class LoginForm extends Component {

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

    // other methods
}

答案 1 :(得分:0)

connect的第三个参数需要是一个知道如何将mapStateToPropsmapDispatchToPropsownProps的输出合并到一个对象中然后用作道具的函数的函数。你的连通组件。我认为您正在尝试将该操作传递给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}

答案 2 :(得分:0)

您的连线错误

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

应该是这样的:

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

以便实际调动您的行动

并且在评论中被emed发现:

export default emailChanged;

没有括号。