Question

我正在构建一个表单字段验证对象。我正在使用useState来跟踪表单上每个字段中的值以及要验证的字段类型，即电子邮件，文本，密码。我可以使用两个单独的钩子来做到这一点（一个用于值，一个用于状态）。我正在尝试将这些对象放在一起。这是发生问题的地方。

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

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

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

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

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

如您所见，验证将基于字段的类型。该验证将在表单的onSubmit上进行。该组件将可用于所有表单。由于这个原因，我正在尝试使其通用。

这是我要用于setter函数的内容

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

我在解构这个问题上遇到了问题，该问题用于获取文本和colType以基于colType验证文本。 [name]是要验证的对象的名称。

有什么想法吗？

Answer 1

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

它应该是：

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

或：

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

Answer 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的帮助

具有对象数组的ReactNative useState

2 个答案: