挂钩用户介绍2次

Question

我有一个authentication.reducer.js，

export default function(state = initialState, action ){
switch(action.type) {
    case SET_CURRENT_USER:
        return {
            ...state,
            isAuthenticated: !isEmpty(action.payload),
            user: action.payload
        }
    default: 
        return state;
}}

和我的提供者上下文带有用户挂钩。以及用于调度动作的使用效果挂钩" setCurrentuser"并设置"等法化"如果客户记录了客户。

import authReducer from "./reducers/authentication.reducer";
...
const [stateUser, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: {}
});
useEffect(()=>{
    if (localStorage.jwt) {
        const decoded = localStorage.jwt;
      
        dispatch(setCurrentUser(decoded));
    }
},[])

我将console.log（stateuser.isauthenticatienationed）放在我的组件中，这显示了" false"（初始值），然后" true"（调度）。
我需要将状态（stateuser.isauthenticated）传递给其他儿童组件，但不需要传递初始值（" false"）。

我有一个仪表板组件（仅适用于用户记录），在我的使用效率下，我需要这样做：

if(!context.stateUser.isAuthenticated) {
        props.history.push('/login');
        
}

和我的登录名：

if(context.stateUser.isAuthenticated) {
        props.history.push('/');
}

这有效。如果我登录并转到"/＆quot"没关系，如果我转到"/login"，此重定向到"/＆quot"。

，但是问题是在调度和用户使用中的重新渲染。状态走了：false-＆gt; true，那么它会导致此效果：输入"/＆quot" - ＆gt;＆quot;＆quord;＆quot;＆quot; quin（false）＆quot; - ＆gt;＆gt;＆qut;＆quort;＆quot;＆quort;

如何防止这种效果？/ - ＆gt;/登录 - ＆gt;/== enter-＆gt; false-＆gt; true。我需要：输入 - ＆gt;true

Answer 1

我的建议是将isAuthenticated设置为 null启动，并且仅在状态明确设置为true或false时才调用历史记录函数：

if (context.stateUser.isAuthenticated === false) {
    props.history.push('/login');
}
if (context.stateUser.isAuthenticated === true) {
    props.history.push('/');
}

确保使用三重等于比较的比较。

这有帮助吗？

编辑

如果您这样做，即使没有用户登录，也需要致电setCurrentUser。

useEffect(()=>{
    const decoded = localStorage.jwt ? localStorage.jwt : "";
    dispatch(setCurrentUser(decoded));
},[])