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

Question

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

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 ？

Answer 1

对于动态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'
  }
})