React Native:为什么状态变量只在热重载时更新?

Question

场景

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

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

每个选项卡都是其自己的组件，具有自己的状态，每个选项卡都包含状态变量a。每个<Checkbox>都以"已检查"开头，即this.state.atrue。

不寻常的行为

假设我们有选项卡 A、B 和 C，它们最初都truethis.state.a(因此选中了它们的每个复选框)。如果我单击选项卡 A 中的复选框，则 A 中的this.state.a将变为false，并且复选框将按预期变为未选中状态。但是当我导航到选项卡 B 时，那里的复选框也未选中。 由于某种原因，B 中的this.state.a仍然true。如果我保存我的一个文件，屏幕热重载，B 中的this.state.a现在将变为false。

我的问题是：

为什么在一个选项卡中切换

1. 复选框会影响其他选项卡中复选框的切换值？

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

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

Answer 1

根据我的经验，在 react-native 中进行热重载是不可靠的。如果你只是改变风格，那就太好了。在您的情况下，由于热重载是为速度而设计的，因此它会根据您的更改进行部分刷新。虽然它使 b 项为假但不刷新组件状态。在这种情况下，手动重新加载会非常可靠

Answer 2

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

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