mysql - useSelector 函数不更新分派(dispatch)函数后的状态 - react Hook

Question

我正在执行身份验证模块，当我单击登录按钮时，我正在验证当前用户是否是 MySQL 数据库。我在登录页面这里调度函数

基本上当我调度它时，rSignedIn 的空状态不会在调度函数后立即改变。我完全在使用 react 钩子(Hook)。请帮我解决这个问题，我已经试了三天了。

但是，当我再次单击登录按钮时，rSignedIn 状态值会更新，一般来说，当我使用 useSelector 使用状态值时，该值会在第二次调用 handleLogin() 时更新

//Sign in Page

...
...

const status=useSelector((state)=>state);
...
...
const handleLogin=(event)=>{
      dispatch(LoginUser(loginData));
      console.log(status.auth.rSignedIn);
      if(status.auth.rSignedIn){
        console.log("LOGIN success");
        History.push('/');
      }else{
        console.log("LoginFailed") ;
      }
    }

这是我向 MySQL db 发送请求的操作索引页面，如果有响应，我将发送它，否则会出错。

export const LoginUser=(loginData)=>async(dispatch)=>{
    await mysqlDB.post('/fetch/retreive',loginData)
    .then((response)=>dispatch({type:ActionTypes.LOGIN_SUCCESS,payload:response.data}))
    .catch((error)=>dispatch({type:ActionTypes.LOGIN_FAILED}))
}

这是我的 Reducer:

const initialState = {
    gSignedIn:null,
    userId:null,
    registered:null,
    data:null,
    rSignedIn:null,
}


export default (state=initialState,action)=>{
    switch (action.type){
        case ActionTypes.GSIGN_IN:
            return {...state,gSignedIn:true,userId: action.payload};
        case ActionTypes.GSIGN_OUT:
            return {...state,gSignedIn:false,userId:null};
        case ActionTypes.REGISTER_SUCCESS:
            return {...state,registered:true,data: action.payload};
        case ActionTypes.REGISTER_FAILED:
            return {...state,registered:false,data:null};
        case ActionTypes.LOGIN_SUCCESS:
            return {...state,rSignedIn:true,data: action.payload};
        case ActionTypes.LOGIN_FAILED:
            return {...state,rSignedIn:false,data:null};
        case ActionTypes.LOGOUT:
            return {...state,rSignedIn:false,data:null};
        default:
            return state;
    }
};

Answer 1

dispatch 不会立即更新您的状态值。状态值受闭包约束，只会在您的下一个渲染周期中更新。

您可以在action 中使用history.push 或使用useEffect

const handleLogin=(event)=>{
      dispatch(LoginUser(loginData, History));
    }

...

export const LoginUser=(loginData, history)=>async(dispatch)=>{
    await mysqlDB.post('/fetch/retreive',loginData)
    .then((response)=>{
           dispatch({type:ActionTypes.LOGIN_SUCCESS,payload:response.data}));
           history.push('/')
    }
    .catch((error)=>{
          dispatch({type:ActionTypes.LOGIN_FAILED}))
    }
}

---

使用 useEffect，您只需要在更改时运行它，而不是在初始渲染时运行它

const initialRender = useRef(true);
useEffect(() => {
   if(!initialRender.current) {
       if(state.auth.rSignedIn) {
           history.push('/');
        } else {
           console.log(not signed in);
        }
   } else {
       initialRender.current = false;
   }
}, [state.auth.rSignedIn])