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仅用于副作用，例如获取数据和更新组件状态。如果您从componentDidMount返回某个组件（例如<Link />），则不会渲染该组件。而且永远不要在render内部做任何副作用。

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

Answer 2

componentDidMount无法呈现

如上述答案中所述：

componentDidMount仅用于副作用，例如获取数据和更新组件状态。现在

如何使其与您的代码一起使用

为了使其正常工作，您的componentDidMount应该像

componentDidMount(){

 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 )

  })
}

和您的renderUserHeader应该像

renderUserHeader = () =>{
   if(!sessionStorage.getItem('user-auth')){
      return   <Link to="/login"> <LoginLink /> </Link>
   }
  if(!this.state.admin){
    return <UserHeader name ={this.state.userName}/>
  }
  else if(this.state.admin){
    return  <AdminHeader name ={this.state.userName}/> 
  }

 }

，您可以从render方法调用它。

Answer 3

您可以对ternary operator使用条件渲染。

{this.state.isLoggedIn ? (some JSX if true) : (some JSX if false or just NULL)}

在componentDidMount中，您可以将isLoggedIn属性设置为状态，因此每次组件加载时-（将运行渲染方法）-将再次检查条件

componentDidMount不呈现

3 个答案: