时间戳

首页 > 解决方案 > componentDidMount 不渲染

javascript - componentDidMount 不渲染

问题描述

我有一个 Header 组件，它假设通过用户是否登录的条件来呈现他的子组件。它通过会话存储识别条件。我试图通过以下方式控制渲染 componentDidMount：

renderUserHeader = () => {
  if (sessionStorage.getItem('user-auth')) {
    var tokenToSend = { token: sessionStorage.getItem('user-auth') }
    var regJSONED = JSON.stringify(tokenToSend)

    fetch('http://localhost:4000/users/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: regJSONED
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('HTTP error ' + response.status)
      }
      return response.text()
    })
    .then(data => {
      let JsonedUserName = JSON.parse(data)

      this.setStateUserName(JsonedUserName.name, JsonedUserName.admin)
    })

    if (!this.state.admin) {
      return <UserHeader name={this.state.userName} />
    } else if (this.state.admin) {
      return <AdminHeader name={this.state.userName} />
    }

  } else if (!sessionStorage.getItem('user-auth')) {
    return (
      <Link to='/login'>
        {' '}
        <LoginLink />{' '}
      </Link>
    )
  }
}

componentDidMount() {
    this.renderUserHeader()
}

如您所见，renderUserHeader组件确实已安装，但无法正常工作。

我尝试renderUserHeader在渲染内部调用并且它有效，但它一直在窃听，我每次都必须刷新页面。

render() {
  return (
    <header>
      <Logo />
      {this.renderUserHeader()}
    </header>
  )
}

有人可以告诉我为什么componentDidMount不起作用吗？

标签： javascriptreactjs

解决方案

componentDidMount 仅用于获取数据和更新组件状态等副作用。如果您<Link />从 componentDidMount 返回某些组件（例如），它将不会被渲染。而且你不应该在渲染中做任何副作用。

相反，您应该在 componentDidMount 中获取和更新状态，并根据状态渲染相应的组件。

推荐阅读