钩子用户发送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;
}}

以及我的带有useReducer钩子的提供者上下文。以及一个useEffect钩子，用于调度操作“setCurrentUser”，并在客户端登录时将“isAuthenticated”设置为true。

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));
    }
},[])

我放了一个控制台。在我的组件中记录（stateUser.isAuthenticated），这将显示“false”（初始值），然后显示“true”（分派）
我需要将状态（stateUser.isAuthenticated）传递给其他子组件，但不需要传递初始值（“false”）。

我有一个仪表板组件（仅用于登录的用户），在我的useEffect中，我需要执行以下操作：

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

在我的登录中：

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

这很有效。如果我已登录并转到“/”即可，如果我转到“/”登录，则会重定向到“/”。

但问题是重新渲染在调度和用户减少。状态去：假-

如何防止这种影响？/-

Answer 1

我的建议是将isAuthenticated设置为null以启动，并且仅在状态显式设置为true或false时调用历史函数，如下所示：

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

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

确保使用三重等于使比较成为严格的比较。

这有帮助吗？

编辑

如果您要这样做，您将需要调用setMONtUser，即使没有用户登录。

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