在reactjs中检索本地存储对象值的问题

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

尝试以下

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

Answer 2

使用componentDidMount（）生命周期函数，它可以在浏览器评估屏幕之前完成工作。 （即使是异步调用）。了解更多关于它here

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

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