React 条件渲染不生效，setState调用后未触发重渲染如何解决？

问题原因 #

bind 方法不会修改原函数，只会返回一个绑定了指定 this 指向的新函数。你在构造函数中仅执行了 this.onLogin.bind(this) 没有将返回值重新赋值给 this.onLogin，导致 onLogin 方法的 this 指向没有完成绑定。子组件调用该方法时，内部的 this 不指向App组件实例，setState 没有生效，自然不会触发组件重渲染。

修复方案 #

有两种常用修复方式：

方式1：构造函数内完成绑定 #

把构造函数中的绑定逻辑修改为赋值形式：

constructor(props) {
  super(props);
  // 把绑定后的函数赋值回this.onLogin
  this.onLogin = this.onLogin.bind(this);
  this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)};
}

方式2：用箭头函数定义方法 #

类属性箭头函数会自动绑定当前实例作为this，无需手动绑定：

// 把onLogin改为箭头函数定义
onLogin = () => {
  this.setState({userLoggedIn: true});
}

两种方案任选其一即可，修改后调用setState就会正常触发App组件重渲染，getView方法会自动执行完成视图切换。

内容的提问来源于stack exchange，提问作者zero