Javascript 组件未呈现

我有一个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()
}

---

有人能告诉我为什么

componentDidMount

不起作用吗？

componentDidMount只用于获取数据和更新组件状态等副作用。如果从componentDidMount返回某个组件（例如

），则不会呈现该组件。 而且，您永远不应该在渲染内部执行任何副作用

---

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

componentDidMount用于获取数据和仅更新组件状态等副作用。如果从componentDidMount返回某个组件（例如

），则不会呈现该组件。 而且，您永远不应该在渲染内部执行任何副作用

---

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

componentDidMount不呈现

正如上面的回答所说：componentDidMount只用于获取数据和更新组件状态等副作用。 现在

如何使其与您的代码配合使用

为了使其工作，您的组件didmount应该如下

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 = () =>{
   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}/> 
  }

 }

你的渲染器领头人应该是

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 = () =>{
   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}/> 
  }

 }

renderUserHeader=（）=>{
如果（！sessionStorage.getItem（'user-auth'））{
回来
}
如果（！this.state.admin）{
回来
}
else if（this.state.admin）{
回来
}
}

---

您可以从render方法调用它。

componentDidMount未渲染

正如上面的回答所说：componentDidMount只用于获取数据和更新组件状态等副作用。 现在

如何使其与您的代码配合使用

为了使其工作，您的组件didmount应该如下

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 = () =>{
   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}/> 
  }

 }

你的渲染器领头人应该是

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 = () =>{
   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}/> 
  }

 }

renderUserHeader=（）=>{
如果（！sessionStorage.getItem（'user-auth'））{
回来
}
如果（！this.state.admin）{
回来
}
else if（this.state.admin）{
回来
}
}

---

您可以从render方法调用它。

您可以将条件渲染与一起使用

---

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

您可以使用条件渲染

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