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

Question

Я получаю 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' }

Answer 1

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

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

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

Answer 2

Попробуйте со следующим

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