为什么这个函数中有这些括号 setFormData({ ...formData, [e.target.name]: e.target.value});？ [复制]

Question

我的onChange 处理程序用于提交具有多个输入值的表单，并接受给定输入字段的名称属性。所以我基本上知道这段代码做了什么，但我不知道到底发生了什么。

为什么[e.target.name] 中有括号？
我也知道在这种情况下setFormData({ ...formData, name: e.target.value}); 函数每次都会使用属性名称更改输入字段的值。

const Register = ({ setAlert, register, isAuthenticated }) => {
  const [formData, setFormData] = useState({
    name:"",
    email:"",
    password: "",
    password2: ""
  }); 

  const {name, email, password, password2} = formData;

  const onChange = e => 
    setFormData({ ...formData, [e.target.name]: e.target.value});

如果有人知道就好了。

Answer 1

• spread operator : ... 用于获取数组或对象的所有属性（当然还有值）

  const arr = ["a", "b","c"];
  
  const arr2 = [...arr, "d"];
  
  // arr2 -> ["a", "b","c", "d"]
  

• backets 用于将变量值作为属性放置

  const prop = "myProp";
  const obj = {[prop] : "value"}
  // obj -> {myProp : value}