Свойства объекта React localStorage возвращают неопределенное значение

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я просто играл с реакцией, выполняя аутентификацию пользователя с помощью 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 понять, почему это происходит? Как я могу это решить?

Комментарии:

1. Метод GetItem() интерфейса хранилища при передаче имени ключа вернет значение этого ключа или null, если ключ не существует, в данном объекте хранилища. Вам нужно использовать localStorage.getItem("loggedIn");

2. Поэтому я должен передать localStore.getItem('name')?

3. Да, это позволит вам получить доступ к значению, хранящемуся в localStorage.

4. Пробовал, но он возвращает null

5. Вы должны проанализировать его. Используется JSON.parse() для преобразования объекта из строки. Но вы должны преобразовать в строку при сохранении ее в localStorage, например localStorage.setItem("loggedIn", JSON.stringify(loggedIn))

Ответ №1:

Установите элемент как,

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

Затем вы должны пройти таким образом, чтобы он получил доступ к значению name key in localStorage .

 console.log(localStorage.getItem('loggedIn').name);
 

Комментарии:

1. Он возвращает undefined

2. Попробуйте установить элемент, как указано выше

3. localStorage.setItem("loggedIn", JSON.stringify(loggedIn)); как этот путь и попробуйте получить.

Ответ №2:

Ваш синтаксис для получения имени пользователя из localstorage неверен.

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

localstorage.getItem('loggedIn') предоставит вам пользовательский объект из localstorage, но в виде строки.

Итак, вам нужно преобразовать это в объект, и для этого JSON.parse будет полезно

Это даст вам имя пользователя