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;
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.