在这种基于React的形式中，我对setValues的情况感到困惑您能帮忙详细说明吗？

如何解决在这种基于React的形式中，我对setValues的情况感到困惑您能帮忙详细说明吗？

首先，我们有一个基于反应的小型表单，其中包含三个字段（名字，姓氏，电子邮件），然后是“注册”按钮。现在，作者正在使用以下代码来组织状态。

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

然后，作者使用以下代码从字段onChange中捕获键入的值。但是，我无法完全理解正在发生的事情。我希望有人帮我解释一下。

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

这里的setValues引起了我极大的困惑。例如，为什么我们要在这种情况下尝试“传播”这些值？为什么在传播之后跟随firstName？为什么匿名函数主体用括号和花括号包裹？

非常感谢。

解决方法

setValues是您的React状态的设置者。它设置您的电子邮件，名字和密码。

应该更像这样。

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} />

您可以查看工作示例here

React可以同步或异步设置状态。这意味着您在呼叫setValues()时不必立即更改状态。相反，您的状态可能会在几毫秒后更新。由React的内部工作来决定何时更新您的状态。

因此，React允许我们在设置状态时使用回调。回调将使您能够访问先前的状态，然后可以通过从回调返回来在更新后的状态下使用该状态。在您的setValues()方法中牢记这一点：

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

values上方是您的先前状态-因此是一个对象。当您将一个对象扩展到另一个对象时，您将从values对象中获取所有可枚举的（自己的）键，并将它们添加到您要扩展到的新对象中。您可以将其视为将一个对象的属性合并到一个新对象中：

const a = {
  aKey: 1,bKey: 1.5
}

const b = {
  ...a,bKey: 2
}

/*
b is interpreted as:
{
  akey: 1,bKey: 1.5,bKey: 2 <-- Objects can't have duplicate keys,so this one overwrites the above
}

... which then evaluates. to:
{
  "aKey": 1,"bKey": 2
}

*/

console.log(b);

您的回调然后返回新更新的对象（因为这是一个箭头函数，因此是隐式返回）。请注意，该对象包含在括号( )中。这是因为没有括号的情况下，对象文字的{ }将被解释为代码块（因此代码将被解释为功能体）而不是对象文字。

// Arrow function with a body (ie: code-block)
// code-block --- \/
const foo = () => {

};

// Arrow function with implict return
const bar = () => ({ // <--- object

});

关于event.persist()的注释。

React使用SyntheticEvents。 SyntheticEvent是本机事件对象的包装，该对象被传递给事件处理程序。 React使用此包装器来实现跨浏览器的兼容性。但是，SyntheticEvents与本地事件有点不同，因为它们是"pooled"。池实质上意味着SyntheticEvents被重用，这意味着event的相同对象引用可用于整个应用程序中的其他事件。因此，在使用完对象后，需要将其“清空”。 “使对象无效”是指一旦事件处理程序完成，就使对象null的键值生效。因此，事件对象的键仍然保留，但是键的值设置为null。这样，当另一个事件触发时，React可以获取SythenticEvent并填充其值。 React使用这种池化的概念，因为为每个事件创建一个新的SyntheticEvent实例可能会非常昂贵，因此，使用引用更为有效，因为不需要为每个事件都创建一个新实例。

react使事件无效的原因是由于性能原因。如果将这些值设置为null，则可以对旧值进行垃圾回收，从而释放应用程序的内存。

因此，一旦事件处理程序执行完毕，event的属性将为空。如前所述，setValues()可以是异步的，这意味着它可以在事件处理程序执行完并使事件对象无效之后运行。结果，由于event.target.value的无效，执行event将导致错误。因此，要停止发生此错误，我们可以使用event.persist()阻止事件被合并并因此而无效。现在event将不会被重用，因此不需要将其无效。结果，另一个综合事件将添加到池中以替换旧事件。对于您的情况而言，持久化整个事件对象有些过分，因为您要持久化的只是event.target.value。可以通过将event.target.value的 value 保存在变量中来实现。

const firstName = event.target.value;

当对象为空时，这不会影响我们的firstName变量，因为它存储的是一个值，而不是对象内对该值的引用。这样，当您设置状态时，您的回调可以关闭此变量，因为使用它就好了：

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

事件池不再需要您担心太多，因为它不再在React 17中使用（因为它似乎并不能提高现代浏览器的性能）。

在这种基于React的形式中，我对setValues的情况感到困惑您能帮忙详细说明吗？

如何解决在这种基于React的形式中，我对setValues的情况感到困惑您能帮忙详细说明吗？

解决方法

相关推荐