У меня есть компонент Header, который предполагает визуализацию его дочерних компонентов при условии, что пользователь вошел в систему. Это распознает условие сессионным хранилищем. Я пытался контролировать рендеринг с помощью 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() } 

Как вы можете видеть, renderUserHeader — компонент, который монтировал, но он не работает.

Я попытался вызвать renderUserHeader внутри рендера, и он работал, но он продолжает глючить, и мне приходится обновлять страницу каждый раз.

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

Может кто-нибудь сказать мне, почему не работает componentDidMount ?

Вы можете использовать условный рендеринг с троичным оператором .

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

в componentDidMount вы можете установить свойство isLoggedIn в состояние, поэтому каждый раз, когда загружается компонент — (будет запущен метод render), условие будет проверяться снова.

componentDidMount используется для побочных эффектов, таких как выборка данных и обновление только состояния компонента. Если вы вернете какой-либо компонент (например, {amp}lt;Link /{amp}gt; ) из componentDidMount, он не будет отображен. И вы никогда не должны делать никаких побочных эффектов внутри рендера.

Вместо этого вы должны получить и обновить состояние в componentDidMount и на основе состояния отобразить соответствующие компоненты.

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

и ваш renderUserHeader должен быть как

 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; } } 

и вы можете вызвать его из метода рендеринга.