Question

我实际上想出了如何获得所需的结果，但是我希望有人可以弄清楚这里发生的事情以及为什么我尝试过的其他更直接的方法行不通。

本质上，我需要使用一些变量（即元素的id）在各个级别上设置一些嵌套状态

所以我尝试了这种方式

 handleClick = (e) => {
    var x = e.target.id
    console.log(this.state.fields[x])
   !this.state.fields[x].disabled ? this.setState({[this.state.fields[x].disabled]:true}) : this.setState({[this.state.fields[x].disabled]:false})
}

无论出于何种原因，这都会在顶层创建状态对象“ false”。这对我来说很奇怪，因为控制台正确记录了this.state.field [x]。

我也尝试过相同的方法，但是使用

setState({[this.state.fields.x.disabled]:true})

和

setState({[fields.x.disabled]:true})

两者都不会编译。更不用说我什至不知道如何轻松地更新嵌套状态属性...当然有一种简单的方法！

我是个新手，所以对这里的问题有任何解释将不胜感激。会发布我的解决方案（解决方法）

Answer 1

创建了一个新对象并将其弹回原位

我想我可以接受，除了事实是字段是一个很大的字典（超过100个副词）并复制和粘贴很多条目听起来很昂贵

似乎需要做很多工作才能翻转一个布尔属性

handleClick = (e) => {
    var x = e.target.id

   //console.log("...",this.state.fields[x].disabled)

    if(!this.state.fields[x].disabled) {
        var cat = Object.assign({},this.state.fields)
         cat[x].disabled = true;

        this.setState({fields:cat})
    }
}

Answer 2

fields.x访问带有'x'名称的属性，它与fields[x]不同。

如果更新状态使用先前状态，则应使用

Updater function。通常应避免状态突变，因为这可能导致意外的行为。

可能应该是：

setState(({ fields }) => ({
  fields: {
    ...fields,
    [x]: {
      ...fields[x],
      disabled: true
    }
  }
}));

Answer 3

// Assuming your state is like this: 
  state = {
    fields: {
      "fieldId-1": {
        disabled: false
      },
      "fieldId-2": {
        disabled: true
      }
    }
  };

因此，您基本上是在这里传递' this.state.fields ['fieldId-1']。disabled === false '的值，并在setState调用中实际执行此操作：

   this.setState({false: false});

肯定会在您的状态对象的顶层创建一个新字段其他情况也一样。

如果您想更新嵌套属性，例如'fieldId-1'，那么一种可能的方法是使用updater函数优雅地合并更改。

    this.setState(prevState => ({
      fields: {
        ...this.state.fields,
        [x]: { disabled: !prevState.fields[x].disabled }
      }
    }));
  };

我还创建了一个codeSandbox demo来说明我的观点。希望能帮助到你。快乐编码：）

如何使用键或值中的变量设置反应状态

3 个答案: