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

Posted 2023-03-15

【中文标题】为啥我收到“未使用的默认导出”错误？

【英文标题】：Why am I getting "unused default export" error?为什么我收到“未使用的默认导出”错误？

【发布时间】：2017-06-27 15:48:23

【问题描述】：

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

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

【参考方案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 文件。

【讨论】：

你有机会检查一下吗

【参考方案2】：

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

【讨论】：

它不起作用。如果我这样做然后将鼠标悬停在export const emailChanged 上，它会给我一个unused constant emailChanged 错误。

我认为您可以将操作传递给连接函数。所以你可以试试这个export default connect(mapStateToProps, emailChanged)(LoginForm)。我不太确定这一点。