React 页面未重定向 [英] React page is not redirecting

问题描述

我正在尝试构建基本的电子购物车.我的问题是在注册期间，来自服务器的信息存储在 redux 存储中，我也存储在 localstorage 中，它也保存在那里，但注册页面不会重定向到主页，以防注册成功.在这里，我应用的逻辑是，如果用户在商店中不为空，则应将其重定向到主页.它仅在我手动刷新页面时工作，然后一直工作正常.那么如何处理这个问题呢?

i am trying to build basic e-cart. My problem is that during sign up , information coming from the server is store in redux store and i also store in localstorage , it also save there , but sign up page is not redirecting to home page , in case of successful sign up. Here i am applying logic that if user is not null in store than it should be redirected to home page. It is only working when i manually refresh page , and then all time it works fine. So how to deal with this problem?

这是我的 App.js 文件代码

Here is my App.js file code

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

这是 Redux 的 ActionCreator

This is ActionCreator for redux

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

用户缩减器:

  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 这个存储库，几乎与此相同，但仍然无法正常工作.

I am following https://github.com/basir/node-react-ecommerce this repository , doing almost same as this but still not working.

推荐答案

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

Try adding the user to the dependencies of the useEffect on your signup page list like this:

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 基本上会在第一次运行(并检查用户是否存在)，然后在每次用户更改时再次运行.

the useEffect would basically run the first time (and check if the user exists), and then run again every time the user changes.

如果你把一个空数组作为依赖列表，useEffect 只会在组件挂载时运行一次.

If you put an empty array as the dependency list, the useEffect would only run once when the component is mounted.

这篇关于React 页面未重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！