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

【问题标题】：local storage object value retrieving issue in reactjsreactjs中的本地存储对象值检索问题
【发布时间】：2019-03-15 23:34:23
【问题描述】：

在检索 user.firstName 时，我收到了 undefined。请让我知道这里有什么问题。谢谢。

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' }

【问题讨论】：

如果您注销，您可以发布您的user const 返回的内容吗？以及您在 localStorage 中设置的位
当我打印用户能够得到完整的对象 { id: 1, username: 'admin', password: 'admin', firstName: 'Admin', lastName: 'User', 角色：管理员 }
你能展示如何将用户存储在本地存储中的代码吗？
看起来像竞态条件：组件在（授权）用户保存到本地存储之前呈现。考虑创建能够重现错误的最小示例。

标签： reactjs local-storage

【解决方案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() 生命周期函数，它在浏览器更新屏幕之前完成工作。（甚至是异步调用）。阅读更多关于它的信息here

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

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

【讨论】：