useState钩子中的React . setstate()中的扩展操作符

Question

为什么在setName()函数中使用扩展运算符它是如何工作的。这段代码所做的是它从用户那里获取输入并将其显示在屏幕上，但是在使用扩展运算符之前，当用户在其他输入字段中输入值时，显示的值被擦除。为什么会发生这种情况当使用扩展运算符时，它提供前一个值，代码工作完美我想知道这个背后的逻辑。

import React from "react";
const Count2 = () => {
const [name, setName] = React.useState({ firstName: " ", lastName: " " });
return (
<div>
<input
type="text"
value={name.firstName}
onChange={(e) => setName({ ...name, firstName: e.target.value })}
/>
<input
type="text"
value={name.lastName}
onChange={(e) => setName({ ...name, lastName: e.target.value })}
/>
<h2>Your first Name is - {name.firstName}</h2>
<h2>Your first Name is - {name.lastName}</h2>
</div>
);
};
export default Count2;

Answer 1

这和其他地方的展开运算符没什么不同也就是:

const name1 = {firstname: "x", lastName:"y", age: 27}

假设您想要复制name1对象。你可以说:

const name2 = {...name1}

意味着您将获得该对象的所有属性的副本。现在假设您只想覆盖该对象中的一个属性，那么您可以这样做:

const name2 = {...name1, lastName: name1.lastname.toUpperCase()}

这意味着你首先复制所有的属性&最后用其他东西覆盖lastName属性(在我的例子中是相同复制对象的大写版本)。

在react代码中，您将状态设置为它的副本(因此您不会更改其他属性)，然后您将指定的状态对象属性覆盖为用户输入的内容。所以一切正常!

Answer 2

当对象或数组中的所有元素需要包含在某种类型的列表中时，可以使用扩展语法。

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected

点击这里阅读更多