javascript - Why am I getting "unused default export" error? - Stack Overflow

admin管理员组

文章数量:1291320

I don't get how I'm getting unused default export error whenever I hover over export default emailChanged; in my index.js file. I'm assuming this is why my code won't run in the simulator.

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 {
    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);

Here's 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;

I don't get how I'm getting unused default export error whenever I hover over export default emailChanged; in my index.js file. I'm assuming this is why my code won't run in the simulator.

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 {
    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);

Here's 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;

• javascript
• ios
• reactjs
• react-native

Share Improve this question Follow asked Jun 27, 2017 at 15:48 van jokvan jok 14711 gold badge44 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

In your index.js, you have exported the action emailChanged as a named export and you are again exporting the same as default. However you are only importing it as a named import. Thats the reason for your error.

Remove the default export for emailChanged.

import {EMAIL_CHANGED} from './types';

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

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

However, I assume that your intension was to export default onEmailChange function.

In that case change add

export default onEmailChange to the index.js file.

Because you used export default emailChanged, you can't get the value of emailChanged by destructing. Remove the export default emailChanged line in your index.js and you should be good.

Because you have the wrong import.

replace:

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

with:

import emailChanged from 'TorusTeensApp/src/actions';

Here's a better explanation: Difference between "import {Something} from somelib" and "import Something from somelib" React.js

本文标签： javascriptWhy am I getting quotunused default exportquot errorStack Overflow