Javascript 使用对象数组反应本机useState

我正在构建表单字段验证对象。我使用useState跟踪表单上每个字段的值以及验证字段的类型，即电子邮件、文本、密码。我可以用两个独立的钩子（一个用于值，一个用于状态）来实现这一点。我试图把它们放在一个物体里。这就是问题所在

字段名是每个字段的键。该对象如下所示

      fName : {
          text: 'John',
          colType: 'text'
          }

      lName : {
          text: 'Doe',
          colType: 'text'
          }

      hairColor : {
          text: 'Brown'
          colType: 'text'

      birthDate : {
          text: '02/02/2010'
          colType: 'date'

如您所见，验证将基于字段的类型。此验证将在提交表单时进行。此组件将可用于所有表单。出于这个原因，我正试图让它变得通用

下面是我试图用于setter函数的内容

    setValues({...values,
        [name] : {
            text : [text],
            colType : [colType]
            }
    });

我遇到了一个问题，需要对其进行分解以获取文本和colType，从而基于colType验证文本。[name]是要验证的对象的名称

---

有什么想法吗

您正确地使用了动态键

[name]

。但是，您正在尝试使用一个项目设置数组，变量

text

或

colType

（

text:[text]

表示将一个对象的数组设置为父对象的

text

字段）

相反，它应该是：

setValues({...values,
    [name] : {
        text : text,
        colType : colType
    }
});

或：

---

在问题中使用上述示例：

要将值放入useState挂钩，请执行以下操作：

const [values, setValues] = useState([]);

setValues({...values,
    [name] : {
        text,
        colType
    }
});

要从useState挂钩（包括键）中读取值，请执行以下操作：

const entries = Object.entries(values); 

entries.forEach (function (arrayItem) {
    const {text, colType} = values[arrayItem[0]]; // arrayItem[0] = [name] text = text value colType = colType value for the key which is [name]
    ... the rest of the code to validate the entries for all of the columns on the form
})

---

也许有更好/更可读的方法来提取这些信息，但这是可行的。如果你有更好的方法，请张贴它，我将很高兴更新我的。感谢PJohnson的帮助

我明白你的意思，我已经做了这些更改，这部分工作正常。下一个问题是如何将这些对象分解为变量。我想提取所有三个变量name、text和colType，以便在验证中使用它们。你能举个例子吗？验证器函数是什么样子的？您是否试图基于类似

“fName”

的字符串获取文本和列类型？如果是这样，您可以执行

const{text，colType}=values[name]

。非常感谢。当我知道name，const{text，colType}=values[name]的值时，您给我的东西非常有用。我现在的问题是我不知道textInput对象的名称。我想循环遍历对象“values”中的所有“name”，以获得每个“name”的“text”和“colTypes”。很抱歉命名混乱。如果需要，我可以重命名对象以获得更好的示例。我的最终目标是拥有一个通用验证，它将基于colType验证表单中的所有textInput。上面的name是一个变量，这意味着您可以在循环中使用它。

Object.keys（values.forEach（name=>{//use name here}）

怎么样？这会将所有键（名称）作为字符串存储在数组中，然后使用

const{text，colType}=values[name]

const entries = Object.entries(values); 

entries.forEach (function (arrayItem) {
    const {text, colType} = values[arrayItem[0]]; // arrayItem[0] = [name] text = text value colType = colType value for the key which is [name]
    ... the rest of the code to validate the entries for all of the columns on the form
})