为什么这个函数中有这些括号 setFormData({ ...formData

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

传播运算符：...用于获取数组或对象的所有属性（当然带有值）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}