React 中的 spread 运算符 .setState() 中的 useState Hook

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

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

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

Read more here

Answer 2

好吧，这与展开运算符在其他任何地方所做的没有任何不同：

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

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

const name2 = {...name1}

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

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

这意味着您首先复制所有属性，最后用其他内容覆盖 lastName 属性（在我的示例中是同一复制对象的大写版本）。

在反应代码中，您将状态设置为它的副本（这样您就不会更改其他属性），然后您将状态对象的指定属性覆盖为用户键入的内容进入输入。所以一切正常！

React 中的 spread 运算符 .setState() 中的 useState Hook

Spread operator in React .setState() in the useState Hook

reactjs

react-hooks

use-state