javascript - 如何在 React setState 中使用方括号?

标签 javascript forms validation loops reactjs

我正在遍历字段,验证它们,如果验证失败,我想在此循环内设置验证状态:

Object.keys(validatedFields).map(field => {
  if (validateExists(field.value) === false) {
    this.setState({ validatedFields[field].message: 'error' })
    formIsValid = false
  }
})

但是,我得到一个语法错误:

Unexpected token:
this.setState({ validatedFields[field].message: 'error' })
                               ^

如何使用这种“动态” key ?

最佳答案

对于动态state键,你可以使用Computed Property

例子:

const a = 'apple'

this.setState({
  [a]: 10 // is same as {apple: 10}
})

在您的场景中,我不确定您希望您的 state 结构看起来如何,但是如果您希望 state 键为 validatedFields [字段],那么你可以这样做:

this.setState({
  [validatedFields[field]]: 'error'
})

如果你想让message嵌套在它下面,那么你可以这样写:

this.setState({
  [validatedFields[field]]: {
    message: 'error'
  }
})

关于javascript - 如何在 React setState 中使用方括号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38899884/

相关文章:

javascript - 如何再次绑定(bind)按钮的点击事件

forms - 具有多个输入字段的 Symfony 表单类型

css - 如何验证 scss

javascript - Angular JS 中的 `$.each()` 替代方案

JavaScript 循环使用设定数量的步骤,同时跳过特定步骤

django cbv 基于 is_staff/is_superuser 从表单中动态排除字段

forms - 谷歌浏览器在重定向时创建历史记录项目?

asp.net - 从下拉列表中选择 "Other"选项时如何验证所需的文本?

jQuery 表单验证正则表达式,以符号计数开头

javascript - 当值为 null 时使用扩展运算符