Tengo un componente de encabezado que supone representar sus componentes secundarios según la condición de si el usuario está conectado. Reconoce la condición por el almacenamiento de la sesión. Traté de controlar la representación por componentDidMount :

 renderUserHeader = () ={amp}gt; { 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 ={amp}gt; { if (!response.ok) { throw new Error('HTTP error '   response.status) } return response.text() }) .then(data ={amp}gt; { let JsonedUserName = JSON.parse(data) this.setStateUserName(JsonedUserName.name, JsonedUserName.admin) }) if (!this.state.admin) { return {amp}lt;UserHeader name={this.state.userName} /{amp}gt; } else if (this.state.admin) { return {amp}lt;AdminHeader name={this.state.userName} /{amp}gt; } } else if (!sessionStorage.getItem('user-auth')) { return ( {amp}lt;Link to='/login'{amp}gt; {' '} {amp}lt;LoginLink /{amp}gt;{' '} {amp}lt;/Link{amp}gt; ) } } componentDidMount() { this.renderUserHeader() } 

Como puede ver, renderUserHeader está siendo el componente que se renderUserHeader pero no funciona.

Intenté llamar a renderUserHeader dentro del render y funcionó, pero sigue fallando y tengo que actualizar la página cada vez.

 render() { return ( {amp}lt;header{amp}gt; {amp}lt;Logo /{amp}gt; {this.renderUserHeader()} {amp}lt;/header{amp}gt; ) } 

¿Alguien puede decirme por qué componentDidMount no funciona?

componentDidMount se usa para los efectos secundarios, como buscar datos y actualizar solo el estado del componente. Si devuelve algún componente (por ejemplo, {amp}lt;Link /{amp}gt; ) desde componentDidMount, no se representará. Y nunca debes hacer ningún efecto secundario dentro del render.

En su lugar, debe buscar y actualizar el estado en el componentDidMount y, en función del estado, renderizar los componentes correspondientes.

componentDidMount no se procesa

como se dijo en la respuesta anterior: componentDidMount se usa para efectos secundarios como recuperar datos y actualizar solo el estado del componente. ahora

cómo hacer que funcione con tu código

para que funcione, su componentDidMount debería ser como

 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 ={amp}gt; { if (!response.ok) { throw new Error("HTTP error "   response.status); } return response.text(); }) .then(data ={amp}gt; { let JsonedUserName = JSON.parse(data) this.setStateUserName(JsonedUserName.name,JsonedUserName.admin ) }) } 

y tu renderUserHeader debería ser como

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

y puedes llamarlo desde el método de renderizado.