为什么我收到“未使用的默认导出”错误？

Question

每当我将鼠标悬停在export default emailChanged;上时，我都不知道如何得到unused default export错误； 在我的index.js文件中。 我假设这就是我的代码无法在模拟器中运行的原因。

这是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 {
    onEmailChange(text) {
        this.props.emailChanged(text);
    }

    render() {
        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,
    (dispatch) => ({emailChanged: (text) => dispatch(emailChanged(text))}))(LoginForm);

这是index.js ：

import {EMAIL_CHANGED} from './types';

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

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

export default emailChanged;

Answer 1

在您的index.js中，您已将操作emailChanged导出为命名导出，并且您再次导出与default相同的内容。 但是，您只是将其作为命名导入导入。 这就是你错误的原因。

删除emailChanged的​​默认导出。

import {EMAIL_CHANGED} from './types';

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

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

但是，我假设您的意图是export default onEmailChange函数。

在这种情况下，更改添加

export default onEmailChange到index.js文件。

Answer 2

因为你使用了export default emailChanged ，所以无法通过析构获取emailChanged的​​值。 删除 index.js 中的export default emailChanged行，你应该会很好。

Answer 3

因为你有错误的导入。

代替：

import {emailChanged} from 'TorusTeensApp/src/actions';

和：

import emailChanged from 'TorusTeensApp/src/actions';

这是一个更好的解释： “从 somelib 导入 {Something}”和“从 somelib 导入某物”React.js 之间的区别