如何使用动态key正确解构赋值？(反应/解构-赋值)

Question

我只是得到了一个关于解构这段代码的eslint错误，但我不知道它应该是什么样子。在这种情况下，我可能会忽略这个警告，因为这个代码已经很简洁了，但是，我很好奇它是如何被解构的。任何想法或指导都是值得感谢的。

  _onChange = (e, key) => {
    const edited = { ...this.state[key] }; <--- this line is throwing the eslint error
    edited[e.name] = e.value;
    this.setState({
      [key]: edited,
    });
  };

Answer 1

所以，我能够带着评论到达那里。

在一天结束时，我意识到我只需要“编辑”就可以成为一个包含非结构化对象的对象。

 _onChange = (e, key) => {
    const { [key]: { ...edited } } = this.state;
    edited[e.name] = e.value;
    this.setState({
      [key]: edited,
    });
  };

在这里，edited将变成{ ...this.statekey }，经过比较，它看起来与前面的代码结果相同，但使用了解构赋值。

如果人们觉得这是不正确的，我希望他们能发表评论。

更简单的是，Emile的建议！

 _onChange = (e, key) => {
    const { [key]: current } = this.state;
    this.setState({
      [key]: { ...current, [e.name]: e.value },
    });
  };