如何更新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()但我想在这里停止使用简单的解决方案，从简短的版本。