问题
I just purchased a course of React Native from Udemy, Stephen Grider is the author of the course. So basically I'm typing my code with him as he types. But unfortunately I'm stuck in a error in the signup process of track application. Whenever I click on Sign Up button after putting email and password so my screen shows this error. Please check my code if there is any mistake so please let me know.
Error
signup is not a function. (In signup({ email: email, password: password })', 'signup' is undefined);
Eror ScreenShot
SignupScreen.js
import React, { useState, useContext } from 'react';
import { View, StyleSheet } from 'react-native';
import { Text, Button, Input } from 'react-native-elements';
import Spacer from '../components/Spacer';
import { Context as AuthContext } from '../context/AuthContext';
const SignupScreen = ({ navigation }) => {
const { state, signup } = useContext(AuthContext);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<View style={styles.container}>
<Text h3 style={styles.heading}>Sign Up for Tracker</Text>
<Input
label='Email'
value={email}
onChangeText={setEmail}
autoCapitalize="none"
autoCorrect={false}
/>
<Spacer />
<Input
secureTextEntry
label='Password'
value={password}
onChangeText={setPassword}
autoCapitalize="none"
autoCorrect={false}
/>
<Spacer />
<Spacer>
<Button
title="Sign Up"
onPress={() => signup({ email, password })}
/>
</Spacer>
</View>
);
};
SignupScreen.navigationOptions = () => {
return {
header: null
};
};
export default SignupScreen;
AutoContext.js
import createDataContext from "./createDataContext";
import trackerApi from '../api/tracker';
const authReducer = (state, action) => {
switch (action.type) {
default:
return state;
}
};
const signup = dispatch => {
return async ({ email, password }) => {
try {
const response = await trackerApi.post('/signup', { email, password });
console.log(response.data);
} catch (err) {
console.log(err.message);
}
};
};
const signin = dispatch => {
return ({ email, password }) => {
};
};
const signout = dispatch => {
return ({ email, password }) => {
};
};
export const { Provider, Context } = createDataContext(
authReducer,
{ signin, signout, signup },
{ isSignedIn: false }
);
createDataContext.js
import React, { useReducer } from 'react';
export default (reducer, actions, defaultValue) => {
const Context = React.createContext();
const Provider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, defaultValue);
const boundActions = {};
for (let key in boundActions) {
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{ state, ...boundActions }}>
{children}
</Context.Provider>
);
};
return { Context, Provider };
};
App.js
import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import SignupScreen from './src/screens/SignupScreen';
import SigninScreen from './src/screens/SigninScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import AccountScreen from './src/screens/AccountScreen';
import { Provider as AuthProvider } from './src/context/AuthContext';
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen
}),
mainFlow: createBottomTabNavigator({
trackListFlow: createStackNavigator({
TrackList: TrackListScreen,
TrackDetail: TrackDetailScreen
}),
TrackCreate: TrackCreateScreen,
Account: AccountScreen
})
});
const App = createAppContainer(switchNavigator);
export default () => {
return (
<AuthProvider>
<App />
</AuthProvider>
);
}
回答1:
I did a mistake in my createDataContext file.
change this condition from
for (let key in boundActions) {
boundActions[key] = actions[key](dispatch);
}
to
for (let key in actions) {
boundActions[key] = actions[key](dispatch);
}
来源:https://stackoverflow.com/questions/58269188/signup-is-not-function-signup-is-undefined-error-react-native