[英]Why am I getting "unused default export" error?
I don't get how I'm getting unused default export
error whenever I hover over export default emailChanged;
每当我将鼠标悬停在
export default emailChanged;
上时,我都不知道如何得到unused default export
错误; in my index.js
file.在我的
index.js
文件中。 I'm assuming this is why my code won't run in the simulator.我假设这就是我的代码无法在模拟器中运行的原因。
Here's LoginForm.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);
Here's index.js
:这是
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;
In your index.js
, you have exported the action emailChanged
as a named export and you are again exporting the same as default
.在您的
index.js
中,您已将操作emailChanged
导出为命名导出,并且您再次导出与default
相同的内容。 However you are only importing it as a named import.但是,您只是将其作为命名导入导入。 Thats the reason for your error.
这就是你错误的原因。
Remove the default export for emailChanged
.删除
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.但是,我假设您的意图是
export default onEmailChange
函数。
In that case change add在这种情况下,更改添加
export default onEmailChange
to the index.js
file. export default onEmailChange
到index.js
文件。
Because you used export default emailChanged
, you can't get the value of emailChanged
by destructing.因为你使用了
export default emailChanged
,所以无法通过析构获取emailChanged
的值。 Remove the export default emailChanged
line in your index.js and you should be good.删除 index.js 中的
export default emailChanged
行,你应该会很好。
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这是一个更好的解释: “从 somelib 导入 {Something}”和“从 somelib 导入某物”React.js 之间的区别
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.