0

情景

在我的 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 中的复选框，则this.state.a在 A 中变为false并且复选框按预期变为未选中状态。但是当我导航到选项卡 B 时，那里的复选框也未选中。this.state.a在 B 中仍然true出于某种原因。如果我保存我的一个文件，屏幕热重新加载，并且this.state.a在 B 中现在将变为false.

我的问题是：

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

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

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

4

2 回答 2

0

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

于 2019-06-13T15:22:25.150 回答
0

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

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

于 2019-06-13T18:57:26.660 回答