当尝试从oidc-client回调中提取状态对象时，未定义的对象

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