Блог

Главная - Вопросы по программированию - проблема с извлечением значения объекта локального хранилища в reactjs

проблема с извлечением значения объекта локального хранилища в reactjs

#reactjs #local-storage

#reactjs #локальное хранилище

Вопрос:

Я получаю undefined при извлечении user.firstName . Пожалуйста, дайте мне знать, что здесь не так. Спасибо.

 class UserBlock extends Component {
 render() {
    const user = JSON.parse(localStorage.getItem("user"));

    return (
      <div>{user.firstName}</div>
    );
  }
}

Я могу получить user объект в консоли, как показано ниже:

 { id: 1, username: 'admin', password: 'admin', firstName: 'Admin', lastName: 'User', role: 'Admin' }

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

1. можете ли вы опубликовать, что возвращает ваш user const при выходе из системы? и бит, в котором вы также устанавливаете его в localStorage

2. когда я печатаю user, я могу получить полный объект { id: 1, имя пользователя: ‘admin’, пароль: ‘admin’, Имя пользователя: ‘Admin’, фамилия: ‘User’, роль: Admin}

3. можете ли вы показать код того, как вы сохраняете пользователя в localstorage?

4. Похоже на состояние гонки: компонент отображается раньше, чем (авторизованный) пользователь сохраняется в локальном хранилище. Рассмотрите возможность создания минимального примера, который будет воспроизводить ошибку.

Ответ №1:

Попробуйте выполнить следующее 

 class UserBlock extends Component {
 constructor(){
  const user = JSON.parse(localStorage.getItem("user"));
  this.state = {
      user
  };
 }
 render() {
    const { user } = this.state
    return (
      <div>{user.firstName}</div>
    );
  }
}

Ответ №2:

Используйте функцию жизненного цикла componentDidMount (), она выполняет работу до того, как браузер обновит экран. (даже асинхронные вызовы). подробнее об этом здесь 

 componentDidMount = () => {
  let user = JSON.parse(localStorage.getItem("user"));
  this.setState({user: user})
}

render() {
  const { user } = this.state
   return (
    <div>{user.firstName}</div>
   );
 }
}