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' })
                               ^

我怎样才能使用这种＆＃34;动态＆＃34;键？

Answer 1

替换：

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

与

var state = {};
state[this.state.validatedFields[field].message] = 'error';
this.setState(state);

Answer 2

希望这行得通： this.setState（{[this.state.validatedFields [field] .message]：'error'}）; 它可以一行完成，方括号评估其中的内容。有关计算的属性名称，请参阅ES6： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

Answer 3

对于动态state键，您可以使用Computed Property

示例：

const a = 'apple'

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

在您的情况下，我不确定您希望state结构是什么样子，但是如果您希望state键是validatedFields[field]，则可以：

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

如果您想将message嵌套在其下，则可以编写：

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

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

3 个答案: