Question

场景

在我的React Native应用程序中，我有一个标签导航器。在每个选项卡中，我都有一个<Checkbox>组件，该组件根据状态变量进行了选中/取消选中，您可以通过单击复选框来切换选中/未选中的值。这些Checkbox组件如下所示：

<CheckBox
  checked={this.state.a}
  onPress={() => this.setState({a: !this.state.a})}
/>

每个选项卡都是其自身的组件，具有各自的状态，每个选项卡都包含状态变量a。每个<Checkbox>都开始“选中”，即this.state.a是true。

异常行为

假设我们有选项卡A，B和C，所有选项卡的开头都是this.state.a，true（因此选中了每个复选框）。如果单击选项卡A中的复选框，则A中的this.state.a变为false，并且复选框按预期变为未选中状态。但是，当我导航到选项卡B时，该复选框也未选中。由于某种原因，B中的this.state.a仍为true。如果我保存了其中一个文件，则屏幕会重新加载屏幕，并且B中的this.state.a现在将变成false。

我的问题是：

1）为什么在一个选项卡中切换复选框会影响其他选项卡中复选框的切换值？

2）当this.state.a不切换到false时，B中的复选框如何从选中状态变为未选中状态？

3）为什么热重新加载页面时B中的this.state.a会切换到false？

任何见识将不胜感激。如果您需要查看其他代码或其他内容，请告诉我。

谢谢！

Answer 1

以我的经验，react-native中的热重装并不可靠。如果您只是要改变样式，那就太好了。对于您而言，由于热重装是为提高速度而设计的，因此它会根据您的更改部分刷新。虽然它使b项为false，但不会刷新组件状态。在这种情况下，手动重新加载将非常可靠

Answer 2

**更新：解决方案：**

我上面提供的代码是实际项目的简化（因为proj包含专有代码）。基本上，this.state.a实际上是一个深达几层的复杂对象，每个屏幕中的this.state.a都像this.setState({a: {...obj}})一样被初始化。我以为用传播运算符将obj表示为{...obj}的表达式obj会在每个屏幕中独立地将this.state.a复制到obj，但是由于this.state.a有几层深，{所有屏幕的{1}}最终都引用了同一对象（obj）。解决方案不是this.setState({a: {...obj}})，而是this.setState({a: JSON.parse(JSON.stringify(obj))})，因为这样做确实可以进行深度克隆（只要obj中的顺序或属性无关紧要）。

React Native：为什么状态变量仅在热重载时更新？

2 个答案: