React Js - 使用外部变量达到内部函数

Question

I got a quick question. Is there anyway to have a global variable that reaches the inne functions in this code. I other words i don't want to have to repeat the line "const user = JSON.parse(localStorage.getItem("user"));"

but rather have a global variable for the user.accessToken

import axios from "axios";
const API_URL = "http://localhost:8081/api/files/";

const upload = (file, onUploadProgress) => {
  const user = JSON.parse(localStorage.getItem("user"));
  let formData = new FormData();
  formData.append("file", file);

  return axios.post(API_URL + "upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: "Bearer " + user.accessToken,
    },
    onUploadProgress,
  });
};

const getFiles = () => {
  const user = JSON.parse(localStorage.getItem("user"));
  return axios.get(API_URL + "getall", {
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + user.accessToken,
    },
  });
};

const FileUploadService = {
  upload,
  getFiles,
};

export default FileUploadService;

Answer 1

I'd suggest using React Context https://reactjs.org/docs/context.html

Firstly, create a new context named userContext, or something fancy

const UserContext = React.createContext();

Then create a provider for this context

function UserContextProvider() {
    const user = JSON.parse(localStorage.getItem("user"));
    return <UserContext.Provider value={user} />

}
// and then the hook for accessing the context
function useUserContext() {
   const context = React.useContext(UserContext);
   if (!context) {
      throw new Error("useUserContext: must be used within a UserContextProvider");
   }
   return context;

}

Then you wrap all of your components that should have access to the context.

<UserContextProvider>
... all other components
</UserContextProvider>

And to access the user data in your component use

function SomeComponent(){
   const user = useUserContext();
   return ....
}