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

对用户进行身份验证并重定向回我的

主页

组件后，我正试图从

signInDirectCallback

函数中检索用户配置文件，如下所示：

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

记录用户（数据）显示正确的对象。但是，使用

setUser（data）

然后在我的返回中尝试检索它会给我未定义的

read属性

以下是功能代码：

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>
    )
}

函数Home（）{
const usermanager=new Oidc.usermanager（authConfig）
const[user，setUser]=useState（localStorage.getItem（“用户”）| |{}）
React.useffect（（）=>{
setItem（“用户”，user）；
}，[用户]）
usermanager.SignInDirectCallback（）.then（函数（数据）{
console.log（数据）
设置用户（数据）
}).catch（函数（e）{
控制台错误（e）
});
返回(
主分量
{user.profile.unique_name}

{console.log（用户）}
)
}

我希望能够将用户存储在一种状态，以便以后在应用程序中使用

这是成品和工作代码：

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>
    )
}

函数Home（）{
const usermanager=new Oidc.usermanager（authConfig）
const[user，setUser]=useState（JSON.parse（localStorage.getItem（“用户”））|{}）
React.useffect（（）=>{
setItem（“user”，JSON.stringify（user））；
}，[用户]）
usermanager.SignInDirectCallback（）.then（函数（数据）{
设置用户（数据）
}).catch（函数（e）{
控制台错误（e）
});
返回(
)
}
在存储用户数据之前，您需要对其进行字符串化：

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

并将其解析回您的对象：

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

为什么页面重新加载后会有任何数据？这一切都将是默认的。您可以在Cookie、localstorage、redirect link…@RTW中的重定向之间存储数据，但这不是我在useffect和
localstorage
调用中所做的吗？这解决了问题。谢谢