React 中解构属性和仅使用属性有什么区别

Question

我有一些关于 React 代码的问题。在我的

App.jsx

中，我编写了从 jsx 标签获得的对象的解构和不解构逻辑：

<input
   name="fName"
   placeholder="First Name"
   onChange={handleChange}
   value={fullName.fName}
/>
<input
   name="lName"
   placeholder="Last Name"
   onChange={handleChange}
   value={fullName.lName}
/>

这是解构方式的代码：

function handleChange(event) {
    const { name, value } = event.target;

    setFullName((preValue) => {
      if (name === "fName") {
        return {
          fName: value,
          lName: preValue.lName,
        };
      } else if (name === "lName") {
        return {
          fName: preValue.fName,
          lName: value,
        };
      }
    });
  }

虽然这是没有解构方式的代码

function handleChange(event) {
    setFullName((preValue) => {
      if (event.target.name === "fName") {
        return {
          fName: event.target.value,
          lName: preValue.lName,
        };
      } else if (event.target.name === "lName") {
        return {
          fName: preValue.fName,
          lName: event.target.value,
        };
      }
    });
  }

请注意，我尝试用相同的逻辑编写代码。然而，虽然前者确实有效，但在后一种方式中，我的代码不起作用并开始崩溃并显示此错误：

TypeError
Cannot read properties of null (reading 'name')
eval
/src/components/App.jsx:11:23
   8 | 
   9 | function handleChange(event) {
  10 |   setFullName((preValue) => {
> 11 |     if (event.target.name === "fName") {
     |                     ^
  12 |       return {
  13 |         fName: event.target.value,
  14 |         lName: preValue.lName,

我希望即使我不使用解构它也能工作

Answer 1

在第一个片段中，值

name

和

value

在调用

setFullName

之前被复制。在第二个示例中，访问对象

event

。如果对象被修改，您会得到不同的行为。

示例：

const event = {
    target: 1
}

function f1(event) {
    const {target} = event;
  g1(() => { console.log(target); });
}

function f2(event) {
  g2(() => { console.log(event.target); });
}

function g1(f) {
    setTimeout(f, 10);
}

function g2(f) {
    setTimeout(f, 10);
}

f1(event);
f2(event);
event.target = 10;