用对象数组反应 Native useState答案

【问题标题】：ReactNative useState with array of objects用对象数组反应 Native useState
【发布时间】：2020-02-28 14:29:01
【问题描述】：

我正在构建一个表单字段验证对象。我正在使用 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] 是要验证的对象的名称。

有什么想法吗？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

您正确使用了动态密钥[name]。但是，您正在尝试设置一个包含一项的数组，变量text 或colType（text : [text] 表示将一个对象的数组设置为父对象的text 字段）。

相反，它应该是：

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

或：

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

【讨论】：

我明白你在说什么，我已经做出了这些改变，这部分工作正常。下一个问题是如何将这些 this 对象解构为变量。我想提取所有三个变量 name、text 和 colType，以便在验证中使用它们。
你能举个例子吗？验证器功能是什么样的？您是否尝试根据"fName" 之类的字符串获取文本和 colType？如果是这样，你可以这样做const {text, colType} = values[name]。
约翰逊非常感谢。当我知道 name 的值 const {text, colType} = values[name] 时，你给我的东西很好用。我现在遇到的问题是我不知道 textInput 对象的名称。我想遍历对象“值”中的所有“名称”以获取每个“名称”的“文本”和“colTypes”。抱歉命名混乱。如果需要，我可以重命名对象以获得更好的示例。我的最终目标是有一个通用的验证，它将验证基于 colType 的表单中的所有 textInput。
上面的 name 是一个变量，也就是说你可以循环使用它。 Object.keys(values).forEach(name => {// use name here}) 怎么样？这会将所有键（名称）作为字符串并将它们存储在一个数组中，然后循环遍历它们并使用 const {text, colType} = values[name] 执行您需要的任何操作

【解决方案2】：

在问题中使用上面的例子：

将值放入 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 的帮助

【讨论】：