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

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函数 。 通常应避免状态突变，因为这可能导致意外的行为。

可能应该是：

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 演示来演示我的观点。 希望能帮助到你。 快乐编码:)