数据在 reactjs 上显示为未定义

【问题标题】：Data is displayed as undefined on reactjs数据在 reactjs 上显示为未定义
【发布时间】：2021-12-31 02:09:27
【问题描述】：

我有使用 jwt 的登录服务。登录后，用户被重定向到个人资料页面。我调用了从数据库中获取数据的服务，该服务运行良好。我可以在控制台上看到所有日志，但是当我在 html 部分返回名称时，我看不到名称。它写成“未定义”。

const currentUser = AuthService.user();
let token = localStorage.getItem('User');

let name;

 authenticationService.findUser(jwt_decode(token)["sub"]).then (response => response.json())
  .then(response=> {
   name = response.name;
   console.log(name);
   console.log(data);
});

return (
  <div>
<h1>{name}</h1>
  </div>
   );

【问题讨论】：

stackoverflow.com/questions/63068154/… 是否回答了您的问题？

标签： reactjs jwt

【解决方案1】：

您的return 中的h1 中的{name} 未定义。

我认为问题在于您在fetch 函数中分配了name=response.name。如果你使用类组件，你应该在这里调用setState；如果你使用钩子，你应该调用setName，例如[name,setName] = useState('')。

【讨论】：

【解决方案2】：

 let [name, setName] = useState("");

  useEffect(() => {
    authenticationService
      .findUser(jwt_decode(token)["sub"])
      .then((response) => response.json())
      .then((response) => {
        setName(response.name);
        console.log(name);
      });
  }, []);

【讨论】：