Reactjs 在这种基于反应的形式中，我对什么感到困惑'；正在使用“setValues”。你能帮我详细说明一下吗？

首先，我们有一个基于react的小表单，它有三个字段（名字、姓氏、电子邮件），后跟一个“注册”按钮。现在，作者正在使用以下代码来组织状态

const [values, setValues] = useState({
    firstName: '',
    lastName: '',
    email: '',
});

然后作者使用以下代码从字段

onChange

捕获键入的值。然而，我不能完全理解正在发生的事情。我希望有人能帮我解释一下

const handleFirstNameInputChange = (event) => {
    event.persist();
    setValues((values) => ({
        ...values,
        firstName: event.target.value,
    }));
};

我对这里发生的

setValues

特别困惑。例如，为什么我们要在这个场景中“传播”价值观？为什么在排列之后紧跟着

名字

？为什么匿名函数体用括号和大括号包装

---

非常感谢。

setValues

是您状态的设置器。它设置您的电子邮件、名字和密码

应该是这样的

const handleChange = (event) => {
    event.persist();
    
    // the name here would be the key of your state object.
    // i.e email, password and firstname
   // it should be defined as the name in your input field.
    const name = event.target.name;
    const value = event.target.value;
    
    setValues((values) => ({
        ...values,
        [name]: value,
    }));
};

你可以像这样使用你的领域

// the name "email" has to be passed through here.
// you could access both the value and the key in your `handleChange` handler
<input type="email" name="email" onChange={handleChange} value={values.email} />

//名称“email”必须在此处传递。
//您可以访问'handleChange'处理程序中的值和键

---

您可以检查工作示例

React可以同步或异步设置状态。这意味着在调用

setValues（）

时，您的状态不一定会立即改变。相反，您的状态可能会在几毫秒后更新。由React的内部工作决定何时更新您的状态

因此，React允许我们在设置状态时使用回调。回调将允许您访问上一个状态，然后通过从回调返回，您可以在更新状态中使用该状态。在

setValues（）

方法中牢记这一点：

setValues((values) => ({
  ...values,
  firstName: event.target.value,
}));  

上面的

值

是您以前的状态-因此是一个对象。当您将一个对象展开到另一个对象中时，您将从

值

对象中获取所有可枚举（own）键，并将它们添加到要展开到的新对象中。您可以将其视为将一个对象的特性合并到一个新对象中：

const a={
阿凯：1，
bKey:1.5
}
常数b={
A.
bKey:2
}
/*
b被解释为：
{
阿凯：1，
bKey:1.5，
bKey:2非常感谢您对@PrateekThapa的建议。但是，在我去那里之前…我真的很想了解发布的片段…特别是，
setValues（（values）=>（{…values，firstName:event.target.value，}））；
。尝试“传播”的作用是什么这里的值？第二，为什么匿名函数的主体用括号和括号包装？发生了什么事？
setValues（（values）=>（{…values，[name]：value，}））
这里说的是让我们将以前的状态与新状态合并。就括号而言，它是隐式返回。它基本上是返回对象。您可以在这里检查“隐式返回”…啊，当然！！所以匿名函数只作为参数传递，以便它将一个新对象返回给
setValues
。这是我理解的关键。谢谢。但是，说
…values
返回所有现有的名称和值对是正确的吗…包括
firstName
icit添加的
firstName
及其末尾的值会导致返回对象中出现重复？在具有相同键的对象中没有重复项。firstName的显式添加会被合并以替换旧的。啊，好吧！所以，即使我要“添加”
firstName
5次使用不同的值，最后一个值将替换所有其他值。正确吗？