Question

我不知道为什么this.role在渲染中是未定义的。

export default class Dashboard extends Component {

  componentDidMount() {
    this.role = window.localStorage.getItem('role')
    console.log('role', this.role) //return admin
  }

  render(){
    console.log('role', this.role) //return undefined
    return(
      <div>
        Component
      </div>
    )
  }
}

我检查了我的应用的localStorage，它有价值。

Answer 1

它返回未定义，因为您在组件装载后this.role 设置了componentDidMount。所以第一个渲染没有this.role。

运行componentDidMount后，您不会更改状态，渲染不会再次运行（因此无法获取新信息）。

尝试使用componentWillMount代替它，它可能会起作用。

这里是React Lifecycle documentation。

编辑：添加了代码。

export default class Dashboard extends Component { componentWillMount() { this.role = window.localStorage.getItem('role') console.log('role', this.role) // return admin } render(){ console.log('role', this.role) // now returning admin because this.role is set before the 1st render return( <div> Component </div> ) } }

正如其他用户指出的那样，您也可以使用setState，它也可以工作（在这种情况下，当状态发生更改时，再次运行渲染并相应地显示您的角色）。

Answer 2

在初始渲染时，会调用render（）方法（在调用componentDidMount（）之前），因此它显示为“undefined”。更改'this.role'的值不会重新呈现页面。

你必须为此使用州。我认为下面的代码应该可行。

export default class Dashboard extends Component {
constructor(){
  super()
  this.state = {
    role : undefined
    }
} 

componentDidMount() {
    this.setState({role: window.localStorage.getItem('role')})
    console.log('role', this.role) //return admin
  }

  render(){
    console.log('role', this.state.role) //return undefined
    return(
      <div>
        Component
      </div>
    )
  }
}

Answer 3

您在视图中看到undefined，因为在组件呈现时，role中没有任何内容，因为在初始渲染后调用了componentDidMount。此外，在您从role设置localStorage值之后，组件不会重新呈现，因为它不在状态上。如果您将role置于状态并执行此操作：

componentDidMount() {
  this.setState({ role: window.localStorage.getItem('role')});
}

render(){
  console.log('role', this.state.role)
  return(
      <div>
        Component
      </div>
    )
}

然后您将能够在视图中看到role的值，但是根据有关{{1}的反应文档，它将导致组件的额外重新呈现，因为您将更改其state }：

在此方法中调用setState（）将触发额外的渲染，但是它会在浏览器更新屏幕之前发生。

您可以详细了解componentDidMount here。

更新

在您的情况下，您不必将componentDidMount置于状态，但随后您可以从role获取其值：

constructor

它将在视图中显示。

使用react componentDidMount在变量中未定义

3 个答案: