小编Rob*_*ius的帖子

我正在制作一个身份验证系统，在后端将我重定向到前端页面后，我正在为 userData 发出 API 请求，并将该数据保存到 localStorage。然后我试图加载 Spinner 或 UserInfo。

我正在尝试使用 useEffect 侦听 localStorage 值，但登录后我得到“未定义”。当 localStorage 值更新时 useEffect 不会再次运行并且 Spinner 永远保持旋转。

我试图做：JSON.parse(localStorage.getItem('userData'))，但后来我得到了一个 useEffect 无限循环。

只有当我刷新页面时，我的 localStorage 值才会出现，我可以显示它而不是 Spinner。

我做错了什么？

也许有更好的方法在准备好时加载 userData？

我正在尝试以正确的方式更新 DOM？

感谢您的回答;)

import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';

const Main = () => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    setUserData(localStorage.getItem('userData'));
  }, [localStorage.getItem('userData')]);

  return <>{userData …

我正在使用与 axios 的反应来获取一些信息。我正在向 auth 用户发送 JWT 令牌，并在控制台浏览器中收到响应

“从源'http://localhost:3000' 访问 XMLHttpRequest at 'https://beer-tonight.herokuapp.com/beer/getBeerStatus' 已被 CORS 策略阻止：Access 不允许请求标头字段授权-预检响应中的 Control-Allow-Headers。”

这是我的代码：

componentWillMount(){

    let token = localStorage.getItem('token');


    axios.get('https://beer-tonight.herokuapp.com/beer/getBeerStatus', {headers: {Authorization : 'Bearer ' + token}}).then(
    result => {
        console.log('yey');
    });
}

错误：

当我使用 POSTMAN 时，我得到了正确的答案。

邮递员输入：

ps我已经添加了：

app.use((req, res,next)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorisation');
next();