Reactjs useReducer:无法使用userReducer获取初始状态
我已经实现了useReducer,以根据操作类型分派操作,并且每次我根据操作类型更新状态变量时,都会在尝试读取初始状态时出错。也许我的代码可以解释更多 尝试读取initialLoginState.isLoading时出错 App.js代码:Reactjs useReducer:无法使用userReducer获取初始状态,reactjs,react-native,react-hooks,use-reducer,redux-reducers,Reactjs,React Native,React Hooks,Use Reducer,Redux Reducers,我已经实现了useReducer,以根据操作类型分派操作,并且每次我根据操作类型更新状态变量时,都会在尝试读取初始状态时出错。也许我的代码可以解释更多 尝试读取initialLoginState.isLoading时出错 App.js代码: import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import BottomNavigation from './s
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import BottomNavigation from './src/Navigations/BottomNavigation';
import AuthStackNavigation from './src/Navigations/AuthStackNavigation'
import { useState, useEffect, useMemo, useReducer } from 'react';
import { View } from 'react-native-animatable';
import { ActivityIndicator } from 'react-native';
import { AuthenticationContext } from './src/context/AuthenticationContext'
export default function App() {
//Initial state values
const initialLoginState = {
isLoading: false,
userName: null,
userToken: null
}
//Reducer function
const loginReducer = (action, prevState) => {
switch (action.type) {
case 'LOGIN':
return {
...prevState,
userToken: action.token,
userName: action.id,
isLoading: false
};
case 'LOGOUT':
return {
...prevState,
userName: null,
userToken: null,
isLoading: false,
};
case 'REGISTER':
return {
...prevState,
userToken: action.token,
userName: action.id,
isLoading: false,
};
case 'RETRIEVE_TOKEN ':
return {
...prevState,
userToken: action.token,
isLoading: false
};
}
}
//Defining useReducer
const [newLoginState, dispatch] = useReducer(loginReducer, initialLoginState);
const authContext = useMemo(() => ({
signIn: (email, password) => {
// setUserToken('abc');
// setIsLoading(false);
console.log("called")
let userToken
userToken = null;
if (email == 'user' && password == 'pass') {
userToken = 'abc';
}
dispatch({ type: 'RETRIEVE_TOKEN', id: email, token: userToken })
},
signOut: () => {
dispatch({ type: 'LOGOUT', })
},
signUp: () => {
setUserToken(null);
setIsLoading(false);
}
}), []);
useEffect(() => {
let userToken;
userToken = "dfsdfsdf"
dispatch({ type: 'REGISTER', token: userToken })
}, [])
if (initialLoginState.isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
<ActivityIndicator size='large'></ActivityIndicator>
</View>
)
}
return (
<AuthenticationContext.Provider value={authContext}>
<NavigationContainer>
{initialLoginState.userToken !== null ?
<BottomNavigation />
:
<AuthStackNavigation />
}
</NavigationContainer>
</AuthenticationContext.Provider>
);
}
首先,减速机功能开关中的默认情况丢失强>
第二,你能把整个组件代码(只是需要的部分!)放进去吗?因为即使没有默认的大小写,我运行你的代码也没有问题尝试将reducer函数更新为此(翻转参数!):
不要忘记默认情况 谢谢你的回复。我已经为您的参考更新了完整的代码。发布组件代码作为整体,而不是从这里和那里,这样我们就可以看到发生了什么!我已经更新了entier App.js文件。请看一下。非常感谢您的帮助。它真的耍了一个花招。只需交换参数,就可以很好地工作。不客气,默认情况下不要忘记:)是的,我添加了它
TypeError: undefined is not an object (evaluating 'newLoginState.isLoading')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
- node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
- node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
//Reducer function
//- const loginReducer = (action, prevState) => {
const loginReducer = (prevState, action) => {
switch (action.type) {
case 'LOGIN':
return {
...prevState,
userToken: action.token,
userName: action.id,
isLoading: false
};
case 'LOGOUT':
return {
...prevState,
userName: null,
userToken: null,
isLoading: false,
};
case 'REGISTER':
return {
...prevState,
userToken: action.token,
userName: action.id,
isLoading: false,
};
case 'RETRIEVE_TOKEN ':
return {
...prevState,
userToken: action.token,
isLoading: false
};
default:
return prevState;
}
}