webentwicklung-frage-antwort-db.com.de

Reagieren: Kann ich vor dem Rendern prüfen, ob ein Status vorhanden ist?

Ich bin neu bei React und habe eine Navigationsleiste erstellt, die den Benutzernamen Benutzer anzeigt 

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

das Problem ist jedoch, wenn der Benutzer nicht angemeldet ist. Ich erhalte eine Fehlermeldung, weil this.state.name undefiniert ist. Gibt es eine Möglichkeit, zu überprüfen, ob this.state.name definiert ist, bevor es als Teil der Navigationsleiste gerendert wird, oder gibt es eine bessere Möglichkeit, diesen Fehler zu beseitigen?

javascriptreactjsreact-jsx
11
jmona789

Sicher, verwenden Sie ein Ternär:

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

oder noch kürzer

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

Sicher kannst du:

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

Jetzt können Sie userNavItem in Ihrer Navbar-Komponente verwenden. Die Wiedergabe wird nur durchgeführt, wenn this.state.name definiert ist.

0
Mchl

In React können Sie überprüfen, ob vor Push ein Status vorhanden ist

    checkedProduct=(prop)=>{
  var checkIfExist = this.state.checkedProduct.filter((product)=>{
    return product===prop
  })
  if(checkIfExist.length>0){
    var checkIfExist = this.state.checkedProduct.filter((product)=>{
      return product!==prop
    })
    this.setState({ checkedProduct:checkIfExist })

  }else{
    this.setState({ checkedProduct: this.state.checkedProduct.concat(prop) })
  }
}
0
Rahul Jat