React中解构与直接访问event.target属性的差异及报错问题

问题背景 #

我在React的App.jsx文件中编写了两段逻辑，分别通过解构赋值和直接访问event.target属性处理input的onChange事件，逻辑完全一致，但未使用解构的代码出现了「TypeError: Cannot read properties of null (reading 'name')」报错，想了解原因及让非解构方式正常运行的办法。

相关代码 #

未使用解构的input标签：

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

使用解构的handleChange函数：

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,
        };
      }
    });
}

未使用解构的handleChange函数（报错版本）：

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,

原因分析 #

这是因为React的合成事件（SyntheticEvent）采用了池化机制：事件处理函数同步执行完毕后，React会立即回收该事件对象，将其内部属性置为null，以便后续复用事件对象、提升性能。

而setFullName的回调函数是异步执行的（React会批量更新状态），当回调触发时，原事件对象已经被React回收，event.target变为null，此时再访问event.target.name就会抛出上述错误。

使用解构赋值的方式之所以正常，是因为在事件处理函数的同步执行阶段，就已经把event.target的name和value提取为局部变量，后续异步回调使用的是这些不受事件池影响的局部变量。

解决办法 #

办法1：同步阶段保存目标元素引用 #

在调用setFullName之前，先把event.target保存为局部变量，后续异步回调使用该变量即可：

function handleChange(event) {
    // 同步阶段保存target引用，避免被事件池回收
    const target = event.target;
    setFullName((preValue) => {
      if (target.name === "fName") {
        return {
          fName: target.value,
          lName: preValue.lName,
        };
      } else if (target.name === "lName") {
        return {
          fName: preValue.fName,
          lName: target.value,
        };
      }
    });
}

办法2：调用event.persist()取消事件池化 #

调用event.persist()可以告诉React不要回收当前事件对象，让它能在异步回调中继续使用：

function handleChange(event) {
    // 取消事件池化，保留事件对象属性
    event.persist();
    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,
        };
      }
    });
}

内容的提问来源于stack exchange，提问作者Thang Thang