Question

我是React的新手，我制作了一个显示用户名称用户的导航栏

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

但问题是如果用户未登录，由于this.state.name未定义，我收到错误。有没有什么方法可以检查this.state.name是否在将其作为导航栏的一部分进行定义之前定义，还是有更好的方法来摆脱这个错误？

Answer 1

当然，使用三元：

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

甚至更短

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

Answer 2

当然可以：

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

现在，您可以在导航栏组件上使用userNavItem，只有在定义了this.state.name时才会呈现。

Answer 3

在React中，您可以在推送之前检查状态是否存在

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

React：我可以在呈现状态之前检查状态是否存在

3 个答案: