时间戳

首页 > 解决方案 > 如何使用键或值中的变量设置反应状态

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

问题描述

我实际上想出了如何获得我需要的结果，但我希望有人可以分解这里发生的事情以及为什么我尝试的其他更直接的路径不起作用。

本质上，我需要使用一些变量（即元素的 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})

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

我很新的反应所以任何关于这里的问题的解释将不胜感激。生病发布我的解决方案（解决方法）

标签： javascriptreactjsstate

解决方案

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

推荐阅读