React Native 状态变更后组件不触发重新渲染问题

涉及的实现细节 #

1. 初始状态声明代码 #

开发者在类组件中声明了9个用于控制视图显隐的布尔状态，当前状态声明代码存在语法不规范问题：

state = {
  shouldShow1: Boolean = false,
  shouldShow2: Boolean = false,
  shouldShow3: Boolean = false,
  shouldShow4: Boolean = false,
  shouldShow5: Boolean = false,
  shouldShow6: Boolean = false,
  shouldShow7: Boolean = false,
  shouldShow8: Boolean = false,
  shouldShow9: Boolean = false,
};

注：上述对象属性赋值语法不符合JavaScript规范，正确写法直接为属性赋值即可，不需要额外标注类型（类组件状态为普通对象，无强制内联类型声明要求）。

2. 点击交互的状态修改逻辑 #

交互规则为：用户点击对应按钮时，仅将目标状态值设为true，其余所有状态值重置为false。当前实现的状态修改代码为：

if (this.state.shouldShow1 == false) {
  this.state.shouldShow1 = await true;
  this.state.shouldShow2 = false;
  this.state.shouldShow3 = false;
  this.state.shouldShow4 = false;
  this.state.shouldShow5 = false;
  this.state.shouldShow6 = false;
  this.state.shouldShow7 = false;
  this.state.shouldShow8 = false;
  this.state.shouldShow9 = false;
.............
}

核心问题：上述代码直接对this.state的属性赋值修改，完全绕过React的状态更新机制，是导致UI无法正常重渲染的根本原因。类组件中必须通过this.setState方法发起状态更新，React才能感知状态变化，触发组件的重渲染流程；此外对布尔值使用await属于无意义操作，布尔值为同步原始值，不存在异步等待的必要。

3. render方法中的条件渲染逻辑 #

组件render方法中基于上述状态值编写了视图的条件渲染规则，即状态值为true时展示A视图，否则展示B视图，对应代码为：

return(
  {this.state.shouldShow1 == true ? Show View A : Show View B  }

  {this.state.shouldShow2 == true ? Show View A : Show View B }
)

问题根因 #

• 直接修改this.state属性值：React 不会监听this.state对象的属性变化，直接赋值的操作不会触发任何组件生命周期流程，自然无法更新UI
• 状态声明存在语法错误：不规范的对象属性写法会导致状态初始化失败，进一步引发状态读取异常
• 状态更新逻辑不合法：类组件的状态更新必须使用this.setState方法，支持对象合并、回调函数等更新形式，不能直接操作state本身的属性

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