如何使用动态键正确解构赋值？ （反应/解构分配）

Question

I'm just getting an eslint error about destructuring this code, but I have no idea how it should look. In this instance, I will probably just ignore this warning as this code is already pretty succinct, but, I am curious how it would be destructured. Any ideas or guidance is appreciated.

  _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

so, I was able to get there with the comments.

At the end of the day, I realized I just needed 'edited' to be an object containing the destructured object.

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

Here, edited will become { ...this.state[key] } which, after comparison, looks to be the same result as the previous code, but using the destructuring assignment.

I hope people will comment if they feel this is incorrect.

Even more simple, suggestion by Emile !

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