Question

我是新来的反应者，正在尝试从子组件中更新组件的状态/上下文。

从下面的AuthProvider（）中，我可以访问整个应用程序中的用户状态。

如果user为null，则会显示一个身份验证页面。在这里，我可以登录并调用loginUser()，后者将用户登录到服务器上，并返回带有刷新和访问令牌和用户名的用户名...将令牌存储在本地存储中并返回用户。这是那个功能...

auth-provider.js

export function handleUserResponse(user) {

  window.localStorage.setItem(localStorageKey, user.refresh_token)
  return user

}

function login({email, password}) {

    return client('/login', {email, password}).then(handleUserResponse)
//the client() function accepts an endpoint and user login info. 
}

我正在尝试从登录页面调用的登录功能更新AuthProvider.js中的状态，以便在收到令牌后将我重定向到受保护的页面。我需要将user设置为新的更新用户。我是新来的反应者，知道这是一种常见的情况，但是如果有人在我之前遇到过这种情况，我将不胜感激。

到目前为止，我只能访问用户变量，而不能从登录页面更改它。

AuthProvider.js

const AuthContext = React.createContext();
  
export const getUser = () => auth.getToken().then((user) => ({ username:user}));
export const loginUser = (data) => auth.login(data).then((user) => ({ username:user }));


function AuthProvider({ children }) {

  const [state, setState] = React.useState({
    status: "pending",
    error: null,
    user: null,
    token: null,
  });


  React.useEffect(() => {
    getUser().then(
      (user) => setState({ status: "success", error: null, user }),
      (error) => setState({ status: "error", error, user: null })
    );
  }, []);


  return (
    <AuthContext.Provider value={state}>
      {state.status === "pending" ? (
        "Loading..."
      ) : state.status === "error" ? (
        <div>
          Oh no
          <div>
            <pre>{state.error.message}</pre>
          </div>
        </div>
      ) : (
        children
      )}
    </AuthContext.Provider>
  );
}
export default { AuthProvider, AuthContext };

Home.js-呈现应用程序的经过身份验证或未经身份验证的版本

import useAuthState from '../UseAuthState'

function Home() {
  const { user } = useAuthState();

  return user.username ? <AuthenticatedApp /> : <UnauthenticatedApp />;

}
export default Home;

UseAuthState.js-这将返回状态数据

import React from 'react';
import AuthContext from './AuthProvider'

function useAuthState() {

  const state = React.useContext(AuthContext.AuthContext);
  const isPending = state.status === "pending";
  const isError = state.status === "error";
  const isSuccess = state.status === "success";
  const isAuthenticated = state.user && isSuccess;
  return {
    ...state,
    isPending,
    isError,
    isSuccess,
    isAuthenticated,
  };
}
export default useAuthState;

更新状态/上下文以重定向到受保护的路由反应

0 个答案: