React js & LocalStorage 如何与 Axios API 响应？

Question

我正在开发反应应用程序，通常用户登录并提交表单和表单，有多个字段，即 select 即下拉字段，

每当用户登录系统时，

login = async (data = {}) => {
    try {
      // const { token, user } = await login(data);

      const { access_token, expires_at } = await login(data);
      const token = access_token;
      localStorage.setItem("token", token);
      const authToken = localStorage.getItem("token");

      const config = await getConfig(authToken);
      localStorage.setItem("config", JSON.stringify(config));

      initAxios();

      this.setState(
        {
          token,
        },
        () => {
          notify({
            type: "success",
            text: "Successfully logged in!",
          });
        }
      );
    } catch (error) {
      if (error.response.status === 401) {
        throw error;
      }
      notify({
        type: "error",
        text: getErrorMessage(error),
      });
    }
  };

我想在我的多表单组件中使用它，我可以在其中得到这个 object，

从本地存储中检索数据的最佳解决方案是什么？

const configData = JSON.parse(localStorage.getItem("config"));
export const category = configData.category;
export const gender = configData.gender;
......

& 从组件中导入并使用它，

是否可以在 useEffect() 钩子的帮助下直接在表单组件中使用它？

在此处添加代码片段@Arnab

if (localStorage.getItem("apiData")) { 
accessoriesConfig = JSON.parse(localStorage.getItem("apiData")); return accessoriesConfig; }
else{ 
return fetchOptions().then(response => localStorage.setItem("apiData", JSON.stringify(response)));
//this is returns me always promise as pending status ,that breaks my functionality 

} 
//API Call with axios
export async function fetchOptions() {
return getAxios("get","/api/config/") .then(response => response.data); 
} ```  

Answer 1

如果您从 api 收到 json 响应，那么您可以通过选择器将数据保存在 Localstorage 中，这样您以后更容易检索。

axios({
    url: 'APIplaceholder'
    adapter: jsonpAdapter
  }).then((res) => {     
        localStorage["name"]=res.data.name
        localStorage["email"]=res.data.email
  });

在这种情况下，当您尝试检索时，您可以通过如下键调用 localstorage.get() function：

localStorage.getItem("name")

或者，您可以将整个响应作为字符串保存到 localstorage，例如：

axios({
        url: 'APIplaceholder'
        adapter: jsonpAdapter
      })
.then((res) => {
     localStorage.setItem("apiData", JSON.stringify(res.data));
});

并像这样检索：

var data = JSON.parse(localStorage.getItem("apiData"));

然后使用 dot(.) 运算符作为 object 访问它们。 data.name

Answer 2

我在这里应用的解决方案如下，

export async function fetchOptions() {
    var configData = JSON.parse(localStorage.getItem("config"));
    if(configData){
      return configData;
    }else{
    return getAxios("get","/api/config/")
      .then(response => {      
        localStorage.setItem('config',JSON.stringify(response.data));
        return response.data;
      });
    }
  }


Importing in Components and Files.

import {fetchOptions} from '../../requests';
var configData = JSON.parse(localStorage.getItem("config"));
if(!configData) {
  fetchOptions().then(res => {
    setConfigValue(JSON.parse(localStorage.getItem("config")));
  });
}else{
  setConfigValue(configData);
}