componentDidMount 未呈现

Question

我有一个 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不起作用吗？

Answer 1

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

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