这行代码`技能：{ ...this.state.skills，[name]：checked }`是什么意思？

Question

   class App extends React.Component {
  
    state = {
    firstName: "",
    lastName: "",
    email: "",
    country: "",
    tel: "",
    dateOfBirth: "",
    favoriteColor: "",
    weight: "",
    gender: "",
    file: "",
    bio: "",
    skills: {
      html: false,
      css: false,
      javascript: false,
    },
  };

  handleChange = (e) => {
     
    const { name, value, type, checked } = e.target;
    console.log(e)
   

    if (type === "checkbox") {
      
      this.setState({
        skills: { ...this.state.skills, [name]: checked },
      });
      
    } else if (type === "file") {
      console.log(type, "check here");
      this.setState({ [name]: e.target.files[0] });
    } else {
      this.setState({ [name]: value });
    }
    console.log(this.state.skills)
  };

这一行是做什么的？

skills: { ...this.state.skills, [name]: checked }

...this.state.skills可能正在使用扩展操作符复制对象，但我不知道[name]: checked的含义，它的目的是将技能obj中的键值更改为true，但我不知道它是如何实现的。

Answer 1

这是一个非常好的问题，下面的内容很多。所以这是学习新东西的好机会。

skills: { ...this.state.skills, [name]: checked } 

命名属性

通常我们使用obj = { "abc": 3 }，但是如果"abc“存储在一个变量name中呢？这就是这个[name]发挥作用的原因。否则我们不得不做obj[name] = 3，这需要额外的努力。还要注意它与obj["name"] = 3之间的区别。这两个版本非常不同。

扩展运算符

如果我们对一个对象执行a = b，它不会为a创建新的内存。

为了创建一个新的a，我们执行a = { ...b }。它从b中取出所有一级属性，并将它们借用到a的新内存空间中。本质上，扩展运算符意味着一个新变量。

但是，只有a是一个新变量，您从b借用的任何东西都不会重新创建，除非它们是原始变量。所以我们不能称扩散算子为深度拷贝。也许我们称它为肤浅的抄袭，我不知道正确的名称;)