尝试从oidc客户端回调检索状态对象时未定义的对象

Question

在验证用户并重定向回我的Home组件后，我正试图从signinRedirectCallback函数中检索用户配置文件，如下所示：

usermanager.signinRedirectCallback().then(function (data) {
console.log(data)
setUser(data)
}).catch(function (e) {
console.error(e)
});

记录用户(数据(显示正确的对象。然而，使用setUser(data)，然后在返回中尝试检索它，得到了read property of undefined。

这是功能代码：

function Home() {
const usermanager = new Oidc.UserManager(authConfig)
const [user, setUser] = useState(localStorage.getItem("user") || {})
React.useEffect(() => {
localStorage.setItem("user", user);
}, [user])
usermanager.signinRedirectCallback().then(function (data) {
console.log(data)
setUser(data)
}).catch(function (e) {
console.error(e)
});
return (
<div>
<h3>Home component</h3>
<p>{user.profile.unique_name}</p>
{console.log(user)}
</div>
)
}

我想要的是能够将用户存储在稍后能够在应用程序中使用的状态中。

这是完成的工作代码：

function Home() {
const usermanager = new Oidc.UserManager(authConfig)
const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")) || {})
React.useEffect(() => {
localStorage.setItem("user", JSON.stringify(user));
}, [user])
usermanager.signinRedirectCallback().then(function (data) {
setUser(data)
}).catch(function (e) {
console.error(e)
});
return (
<UserContext.Provider value={user.profile}>
<div>
<ComponenentThatUsesUserContext />
</div>
</UserContext.Provider>
)
}

Answer 1

在存储用户数据之前，您需要将其字符串化：

localStorage.setItem("user", JSON.stringify(user));

并将其解析回您的对象：

JSON.parse(localStorage.getItem("user"))