如何更新Reaction中的嵌套状态属性

Question

如何更新Reaction中的嵌套状态属性

我试图使用这样的嵌套属性来组织我的状态：

this.state = {
   someProperty: {
      flag:true
   }}

但是像这样更新状态，

this.setState({ someProperty.flag: false });

不管用。如何才能正确地做到这一点？

Answer 1

为了setState对于嵌套对象，您可以遵循以下方法，因为我认为setState不处理嵌套更新。var someProperty = {...this.state.someProperty}someProperty.flag = true;this.setState({someProperty})其思想是创建一个虚拟对象，对其执行操作，然后用更新的对象替换组件的状态现在，扩展操作符只创建对象的一个级别嵌套副本。如果您的状态是高度嵌套的，例如：this.state = {    someProperty: {       someOtherProperty: {           anotherProperty: {              flag: true           }           ..       }       ...    }    ...}您可以在每个级别上使用扩展运算符设置State，如this.setState(prevState => ({     ...prevState,     someProperty: {         ...prevState.someProperty,         someOtherProperty: {             ...prevState.someProperty.someOtherProperty,              anotherProperty: {                ...prevState.someProperty.someOtherProperty.anotherProperty,                flag: false             }         }     }}))然而，随着状态越来越嵌套，上面的语法变得每况愈下，因此我建议您使用immutability-helper包来更新状态。

Answer 2

把它写成一行this.setState({ someProperty: { ...this.state.someProperty, flag: false} });

Answer 3

有时直接回答并不是最好的：)简短版本：这段代码this.state = {     someProperty: {         flag: true     }}应该简化为this.state = {     somePropertyFlag: true}长版：目前您不应该希望在Reaction中使用嵌套状态..因为Reaction不适合与嵌套状态一起工作，所以这里提出的所有解决方案都像黑客一样。他们不使用框架，而是与之斗争。他们建议为分组某些属性的可疑目的编写不那么清晰的代码。因此，它们作为对挑战的回答非常有趣，但实际上是无用的。让我们想象一下以下状态：{     parent: {         child1: 'value 1',         child2: 'value 2',         ...         child100: 'value 100'     }}如果只更改child1？Reaction不会重新呈现视图，因为它使用的是浅比较，它会发现parent财产没有改变。顺便说一句，直接改变状态对象通常被认为是一种糟糕的做法。所以你需要重新创造整个parent对象。但在这种情况下，我们将遇到另一个问题。Reaction会认为所有的孩子都改变了他们的价值观，并且会重新呈现他们所有的价值观。当然，这对性能不好。仍然有可能通过编写一些复杂的逻辑来解决这个问题。shouldComponentUpdate()但我想在这里停止使用简单的解决方案，从简短的版本。