useSelector 函数没有更新调度后函数 -react 钩子的状态

Question

我正在执行一个身份验证模块，当我单击登录按钮时，我正在验证存在的用户是否是MySQL db。我正在登录页面中调度该函数

基本上当我调度它时，rSignedIn 的空状态不会在调度功能后立即更改。我完全使用反应钩子。请帮我解决这个问题，我已经尝试了三天了。

但是当我再次单击登录按钮时，rSignedIn 状态值会更新，一般来说，当我使用 useSelector 使用状态值时，该值会在调用句柄登录(( 的那一秒更新

//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数据库发送请求的操作索引页面，然后如果有响应，我将调度它，否则会出错。

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}))
}

这是我的减速器：

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])