时间戳

首页 > 解决方案 > 带有对象数组的 ReactNative useState

javascript - 带有对象数组的 ReactNative 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] 是要验证的对象的名称。

有任何想法吗？

标签： javascriptreact-native

解决方案

您正确使用了动态键[name]。但是，您正在尝试使用一项、变量text或colType（text : [text]意味着将一个对象的 Array 设置text为父对象的字段）设置一个数组。

相反，它应该是：

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

或者：

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

推荐阅读