Javascript 处理多个复选框和复杂的数据结构（reactjs）

由于我是一个新手，而且对JS（尤其是ES6）不是一个非常精通的专家，所以我想知道如何使我的代码（可以运行的）更漂亮并重构它

我想处理表单中的多个复选框，并将当前值存储在state对象中。由于复选框是分组的，因此我需要一个结构作为答案，任务如下：

{  
   "isLoaded":true,
   "answeredTasks":{  
      "1":[  
         "green",
         "blue",
         "red"
      ],
      "5":[  
         "car",
         "cat",
         "house"
      ]
   }
}

以下是复选框上的onChange方法：

  checkBoxOnChange = e => {
    let currentAnswers = this.state.answeredTasks;

    let element = e.currentTarget;

    // if it is the first answer checked
    if (currentAnswers[element.name] === undefined) {
      currentAnswers[element.name] = [];
    }

    // if uncheck
    if (!element.checked) {
      const index = currentAnswers[element.name].indexOf(element.value);
      currentAnswers[element.name].splice(index, 1);
    } else {
      currentAnswers[element.name].push(element.value);
    }

    this.setState({ answeredTasks: currentAnswers });
  };

你能告诉我如何改进我的方法，特别是ES6吗？ 我主要是努力创建数据结构

---

谢谢。

我希望能看到你的全部代码。 但如果我想建议你做些改变：

通常，避免在代码中使用“let”，而是使用“const”。这样，您就避免了行业最佳实践中的数据变异，React documentation强烈建议您这样做

避免使用突变数据的拼接/推送/弹出方法，而是使用数组函数，如filter/map/some/every等。。。我提到的方法不会改变数据，而是返回一个引用不同的对象

以下是您应该做的更改：

checkBoxOnChange = e => {
    const currentAnswers = this.state.answeredTasks;
    const element = e.target;

    const newAnswers = !element.checked ?
        (currentAnswers[element.name] || []).filter(val => val !== element.value) :
        (currentAnswers[element.name] || []).concat(element.value);  

    this.setState({ answeredTasks: {...currentAnswers, newAnswers} });
 };

请注意，setState（）函数中的{…currentAnswers，newAnswers}正在将currentAnswers与newAnswers中的新更改合并。i、 e.newAnswers将覆盖外部数组中的特定对象。

---

这是一种功能性的做事方式。

我不是第一个，但这是我的测试版本

static changeAnswers = ({target: {name, value, checked}}) => 
  checked
    ? { ...answeredTasks, ...{ [name]: [...(answeredTasks[name] || []), value] } }
    : {
        ...answeredTasks,
        ...{ [name]: (answeredTasks[name] || []).filter(e => e !== value) }
      }

checkBoxOnChange = e => {
  const {answeredTasks} = this.state
  this.setState({answeredTasks: myComponent.changeAnswers(e)})
}

const answeredTasks={“1”：[“绿色”、“蓝色”、“红色”]}
常量元素=[
{名称：“1”，值：“绿色”，选中：false}，
{name:“1”，value:“black”，选中：true}，
{name:“2”，value:“lol”，选中：true}，
{名称：“2”，值：“lol”，选中：false}
]
常量单击=（{name，value，checked}）=>
选中的
? {…应答任务，{[名称]：[…（应答任务[名称]| |[]），值]}
: {
…回答问题，
…{[name]：（answeredTasks[name]| |[]）。过滤器（e=>e！==value）}
}
elements.map（element=>console.log（单击（element））

您能为整个组件代码提供代码吗？另外，作为建议，避免在代码中使用“let”，而是使用“const”来避免数据突变。尝试学习函数式编程范式，这是最好的行业实践。“让”而不是“const”——这在对象的情况下并不重要。当你“变异”一个数组或对象时，你没有重新赋值或声明常量，它已经被声明和赋值了，你只是把它添加到常量指向的“列表”中。维克托，你有点困惑。突变并不是重新声明一个新对象，这正是它不好的原因。。。函数式编程不喜欢副作用，也不喜欢对引用相同的对象进行更改。不变性意味着您应该在每次新更改时参考创建一个新对象，这是行业最佳实践，ReactJs强烈建议这样做。使用splice/pop/push等方法修改对象/数组会改变对象（更改相同的对象），而使用map/filter/some/every则不会。它们将引用性地返回一个新的对象/数组，这是“纯”的处理方式，因此是ReactJs推荐的。