반작용 : 나는 내가 새로 온

Question

반응하고 사용자가 아닌 경우 나 사용자 이름 사용자

<NavItem eventKey={4} href="#">{this.state.name}</NavItem> 

를 표시하지만 문제가있는 네비게이션 바을했습니다 렌더링하기 전에 상태가 존재하는지 확인하실 수 있습니다 로그인 한 후 this.state.name이 정의되지 않아 오류가 발생합니다. this.state.name이 navbar의 일부로 렌더링되기 전에 정의되었는지 또는이 오류를 제거하는 더 좋은 방법이 있는지 확인할 수있는 방법이 있습니까?

Answer 1

당신이 할 수 있는지 :

let userNavItem 
if (this.state.name !== undefined) { 
    userNavItem = <NavItem eventKey={4} href="#">{this.state.name}</NavItem> 
} else { 
    userNavItem = null 
} 

지금 당신이 당신의 메뉴 바 구성 요소에 userNavItem를 사용하고 있습니다 this.state.name이 정의 된 경우에만 렌더링됩니다.

Answer 2

물론, 원계 사용

render() { 
    return (
    this.state.name ? : <NavItem>{this.state.name}</NavItem> : null 
); 
} 

또는 짧은을

render() { 
    return (
    this.state.name && <NavItem>{this.state.name}</NavItem> 
); 
}