Javascript / ES2015在React（或Redux）状态下切换数组对象值[重复]答案

【问题标题】：Javascript/ES2015 toggle array object value in React (or Redux) state [duplicate]Javascript / ES2015在React（或Redux）状态下切换数组对象值[重复]
【发布时间】：2016-04-05 16:57:57
【问题描述】：

如果我有以下情况：

export default class Questions extends Component {

  state = {
    questions: [
      {value: 'value one, required: true},
      {value: 'value two, required: true},
      {value: 'value two, required: true} 
    ]
  };
...

...我想将中间对象的required 更改为false，最好的方法是什么？所以我最终会得到：

questions: [
  {value: 'value one, required: true},
  {value: 'value two, required: false},
  {value: 'value two, required: true} 
]

我试过了：

_toggleRequired = (index) => {
  this.setState({
    questions[index].required = !questions[index].required
  })
};

...但它在第一个[index] 上给了我一个语法错误。返回一个新数组而不是改变现有数组不是最好的吗？

TIA！

【问题讨论】：

您所拥有的只是简单的而不是有效的对象文字。你在任何地方见过foo({bar = baz})吗？
redux 也有这个：stackoverflow.com/q/35592078/218196.
它不是完全重复的，我有一个对象数组，，重复引用是一个对象 - 而不是数组。我也不清楚您要表达的观点 - 如果有的话。将其标记为完全重复的副本无济于事，甚至接近答案。
您是否阅读了已接受的答案？您是否尝试将其应用于您的用例？您是否按照答案的建议查看了facebook.github.io/react/docs/update.html，并阅读了专门用于数组的方法？（FWIW，数组也是对象）
如果您需要一个具体示例来说明如何将已接受答案中的建议应用于数组，这里是：var newQuestions = update(this.state.questions, {[index]: {required: { $set: !questions[index].required } });。我只更改了属性名称并定位了正确的数组元素。

标签： javascript reactjs

【解决方案1】：

如果您不想处理不可变对象，那么我建议您这样做。如果您从当前状态创建一个新的对象数组，请在特定索引处对对象进行更改，然后将该对象保存为它应该完成您正在尝试执行的操作的状态。

_toggleRequired = (index) => {
  let q = this.state.questions;
  q[index].required = !q[index].required
  this.setState({questions : q });
};

【讨论】：

React 并不允许您在对象的属性上设置状态。？你在开玩笑吗。它允许。