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

reactjs

2 个答案: