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

【问题标题】：How to use square brackets in React setState?如何在 React setState 中使用方括号？
【发布时间】：2016-12-18 09:36:56
【问题描述】：

我正在循环遍历字段，验证它们，如果它们验证失败，我想在这个循环中设置一个验证状态：

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

如何使用这种“动态”键？

【问题讨论】：

标签： javascript forms validation loops reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

替换：

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

与

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

【讨论】：

【解决方案3】：

希望这可行： 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

【讨论】：