javascript - componentDidMount 不渲染

Question

我有一个 Header 组件，假设在用户登录的情况下呈现他的子组件。它通过 session 存储识别条件。我试图通过控制渲染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 仅用于获取数据和更新组件状态等副作用。如果您从 componentDidMount 返回某个组件(例如 <Link /> )，它将不会被渲染。而且你永远不应该在渲染中做任何副作用。

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