React组件中如何向setState回调传递变量？事件对象e无法访问如何修复？

嘿，这两个都是React开发里和setState相关的常见小坑，我来给你一步步拆解解决办法～

问题1：如何在React组件中向setState的回调函数传递变量？ #

setState的回调函数是在状态更新完成、组件重新渲染后执行的，要给它传递变量，最常用的是利用闭包特性，或者直接用箭头函数包裹回调来携带变量，这里给你两种实用的方式：

方式1：闭包捕获外部变量 #

在调用setState的函数作用域里定义好需要传递的变量，回调函数就能直接访问到它（因为闭包会保留外部作用域的变量引用）：

handleUserUpdate = () => {
  const targetUserId = 456; // 要传递的变量
  this.setState(
    { userUpdated: true },
    // 回调里直接用外部的targetUserId
    () => {
      console.log(`用户 ${targetUserId} 的信息已更新完成`);
      this.fetchUserDetail(targetUserId); // 比如用变量调用API
    }
  );
};

方式2：箭头函数包裹回调（适合需要动态传参的场景） #

如果变量是动态生成的（比如循环里的元素），可以用箭头函数把回调包起来，直接把变量作为参数传入：

handleItemClick = (itemId) => {
  this.setState(
    { activeItemId: itemId },
    () => this.handleActiveItemChange(itemId) // 把itemId传给后续处理函数
  );
};

问题2：setState的函数式更新中无法访问事件对象e，报错TypeError: Cannot read property 'name' of null #

这个报错的核心原因是：React的合成事件对象会在事件处理函数执行完毕后被回收复用，而setState的函数式更新是异步执行的——当这个更新函数触发时，原来的事件对象e已经被清空了，所以e.target变成了null。

给你两种解决办法，推荐第一种更高效的：

方案1：提前解构事件对象的属性（推荐） #

在调用setState之前，把需要用到的e.target.name和e.target.value解构出来存成变量，这样后续异步执行时用的是普通变量，不受事件回收影响：

handleChange(e){
  // 提前取出需要的属性，存在变量里
  const { name, value } = e.target;
  this.setState((prevState, props) => ({
    ...prevState,
    university: {
      ...prevState.university,
      [name]: value // 这里用提前保存的变量，不会报错
    }
  }));
}

方案2：调用e.persist()保留事件对象 #

如果确实需要直接使用事件对象，可以调用e.persist()方法，告诉React不要回收这个合成事件对象，这样异步回调里就能正常访问了：

handleChange(e){
  e.persist(); // 阻止React回收事件对象
  this.setState((prevState, props) => ({
    ...prevState,
    university: {
      ...prevState.university,
      [e.target.name]: e.target.value
    }
  }));
}

不过要注意，e.persist()会跳过React的事件池优化，可能带来轻微的性能损耗，所以优先用第一种方案哦。

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