具有对象数组的ReactNative useState

时间:2020-02-28 14:29:01

标签: javascript react-native

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

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

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

它应该是:

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

或:

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

答案 1 :(得分:0)

在问题中使用以上示例:

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