开发者问题收集

React localStorage 对象属性返回未定义

2021-01-20
2317

我刚刚在 React 中尝试通过 localStorage 进行用户身份验证。代码片段如下。

export const loginUser = userData => dispatch => {
    axios.get("http://localhost:5000/users")
        .then((res)=>{
            res.data.map(user => {
                if(user.email === userData.email){
                    if(user.password === userData.password){
                        const loggedIn = user;
                        console.log(loggedIn)
                        localStorage.setItem("loggedIn", loggedIn);
                        console.log(localStorage.loggedIn.name)
                        dispatch(setCurrentUser(user));
                    }
                }
            })
        })
        .catch((err)=>dispatch({
            type: GET_ERRORS,
            payload: err.data
        }))
}

现在查看 console.log 输出

在此处输入图片描述

我无法访问用户信息,因为它给我 undefined ,为什么会这样?我该如何解决?

2个回答

您从 localstorage 获取用户名的语法是错误的。

JSON.parse(localstorage.getItem('loggedIn')).name

localstorage.getItem('loggedIn') 将从 localstorage 为您提供一个用户对象,但它是字符串形式。

因此,您需要将其转换为对象,为此 JSON.parse 会很有用

这将为您提供用户名

Sagar Davara
2021-01-20

将项目设置为,

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

然后你必须以这种方式传递,这样它将访问 localStoragename 键的值。

console.log(localStorage.getItem('loggedIn').name);
Pulsara Sandeepa
2021-01-20