web-dev-qa-db-fra.com

React: Puis-je vérifier si un état existe avant de le rendre

Je suis nouveau dans React et j'ai créé une barre de navigation qui affiche le nom d'utilisateur utilisateur 

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

mais le problème est que si l'utilisateur n'est pas connecté, j'obtiens une erreur car this.state.name n'est pas défini. Existe-t-il un moyen de vérifier si this.state.name est défini avant de le rendre dans la barre de navigation ou existe-t-il un meilleur moyen de supprimer cette erreur?

javascriptreactjsreact-jsx
11
jmona789

Bien sûr, utilisez un ternaire:

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

ou même plus court

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

Sûr que vous pouvez:

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

Maintenant, vous pouvez utiliser userNavItem sur votre composant navbar, et le rendu ne sera rendu que si this.state.name est défini.

0
Mchl