Question

我正在尝试建立基本的电子购物车。我的问题是在注册期间，来自服务器的信息存储在redux存储中，我也存储在localstorage中，它也保存在该位置，但是如果成功注册，则注册页面不会重定向到主页。我在这里应用逻辑，如果用户在存储中不为null，则应将其重定向到主页。仅当我手动刷新page时，它才起作用，然后所有时间都可以正常工作。那么如何解决这个问题呢？

这是我的App.js文件代码

 <Provider store={store}>
      <BrowserRouter>
        <Switch>
          <Route path="/signUp" component={SignUp} />
          <Route path="/home" component={HomePage} />
        </Switch>
      </BrowserRouter>
    </Provider>

这是用于Redux的ActionCreator

  .then((res) => res.json())
        .then((res) => {
            localStorage.setItem('user' , JSON.stringify(res.user));
            localStorage.setItem('token' , res.token);
            dispatch({type : ActionTypes.SIGN_UP_USER , payload : res.user})
        })
        .catch((err) => {
            dispatch({type : ActionTypes.SIGN_UP_FAILED , payload : err.message})
        });

User Reducer：

  switch (actions.type) {
        case ActionTypes.SIGN_UP_USER:
            return {
              user: actions.payload, isLoading: false, isError: null
            }

注册页面

  const signupUser = useSelector(state => state.signUpUser);
    const {isLoading , user , isError} = signupUser;
    
    useEffect(()=>{
        if(user)
        history.push(`/home`);
    } , []);
    const handleSubmit = (e) => {
        e.preventDefault();
        dispatch(signUpUser(userName , email , password))
    }

并配置存储文件：

const user = localStorage.getItem('user') || null;
{console.log(user)}
const intialState = {
    signUpUser : {user}
}
export const configureStore = () =>{
    const store = createStore(
        combineReducers({
            signUpUser : signUpUser
        }), intialState , applyMiddleware(thunk , logger)
    );
    return store;
}

我正在跟踪https://github.com/basir/node-react-ecommerce这个存储库，其操作几乎与此相同，但仍然无法正常工作。

Answer 1

尝试将user添加到注册页面列表中useEffect的依赖项中，如下所示：

const signupUser = useSelector(state => state.const {isLoading , user , isError} = signupUser;
    
useEffect(()=>{
    if(user) history.push(`/home`);
}, [user]);

const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(signUpUser(userName , email , password))
}

useEffect基本上会第一次运行（并检查用户是否存在），然后在每次用户更改时再次运行。

如果将空数组作为依赖项列表，则useEffect仅在安装组件时运行一次。

反应页面未重定向

1 个答案: