React Native中{pass++}自增时值被渲染到页面如何解决

JSX里{}包裹的JS表达式，计算结果会被React直接当成内容渲染。你写的后置自增pass++本身是有返回值的——返回自增前的pass值，所以这个值会直接显示在页面上。
额外提一句：在渲染阶段直接修改外部变量本身就是不符合React设计逻辑的副作用操作，会导致变量值完全不可控，比如React严格模式下渲染流程会重复执行两次，pass会平白多一次自增，后续排查问题非常麻烦。

临时快速修复（不推荐长期用） #

利用逗号运算符的特性：逗号会从左到右执行每一段表达式，最终只返回最后一个表达式的结果。你只要让最后一段返回React不会渲染的空值（null、undefined、false都不会被渲染成内容）就行：

return (
  <View>
    <Text>
      {pass++, null}
      {/* 这里放你原本要展示的其他文本 */}
    </Text>
  </View>
)

这种写法虽然能实现效果，但本质还是把副作用塞在渲染表达式里，留着后续出bug的隐患。

规范写法（推荐） #

把自增逻辑挪到JSX结构外面，先处理完变量修改，再返回纯渲染的JSX，从根源上避免表达式返回值被渲染的问题：

// 先完成变量自增
pass++
// 再返回不带修改变量逻辑的纯渲染结构
return (
  <View>
    <Text>
      {/* 这里放你原本要展示的其他文本 */}
    </Text>
  </View>
)

如果pass是和组件状态绑定的值，更建议用useState做状态管理，把自增逻辑放到useEffect或者对应的事件回调里执行，彻底避免渲染过程中修改变量的不规范写法。

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