React-Redux Todo示例复选框触发合成事件复用警告求助

嘿，这个问题我之前做React小项目的时候也踩过坑！其实这是React的事件池机制在搞事情，咱们一步步来拆解解决：

为什么会出现这个警告？ #

React为了提升性能，会把合成事件（就是你拿到的e对象）放进一个事件池里复用。当你的事件处理函数执行完毕后，React会清空这个事件对象的所有属性，如果你在异步操作（比如Redux dispatch的回调、setTimeout）里再去访问e.target这类属性，就会触发这个警告，甚至拿到undefined。你说的和访问原生事件/DOM属性有关，完全戳中了要点～

几种可行的解决方案 #

1. 提前提取需要的属性（最常用） #

在事件处理函数的最开头，就把你需要的属性（比如复选框的checked状态、对应的todo ID）从事件对象里取出来存在变量里，之后全程用这些变量操作，别再碰原事件对象：

handleCheckboxChange = (e) => {
  // 先把要用的属性存下来，脱离事件对象
  const isChecked = e.target.checked;
  const todoId = e.target.dataset.id;

  // 之后用这些变量去dispatch action
  this.props.dispatch(toggleTodo(todoId, isChecked));
}

2. 用e.persist()保留事件对象 #

如果你确实需要在异步操作里访问事件对象，可以调用e.persist()，它会把这个合成事件从事件池里移除，让React不再复用它，这样后续就能正常访问属性了（注意：会有一点点性能损耗，但小项目完全可以忽略）：

handleCheckboxChange = (e) => {
  e.persist(); // 调用这个方法“锁定”事件对象
  
  this.props.dispatch(toggleTodo(e.target.dataset.id, e.target.checked));
  
  // 比如在异步回调里也能正常访问了
  setTimeout(() => {
    console.log("当前状态：", e.target.checked);
  }, 1000);
}

3. 彻底避开事件对象（最推荐） #

其实更好的做法是，在渲染Todo项的时候，直接把对应的todo ID和当前状态作为参数传给处理函数，完全不用碰事件对象，从根源上解决问题：

// 渲染Todo列表时
{todos.map(todo => (
  <div key={todo.id}>
    <input
      type="checkbox"
      checked={todo.completed}
      // 直接把todo的id和要切换的状态传进去
      onChange={() => this.handleCheckboxChange(todo.id, !todo.completed)}
    />
    <span>{todo.text}</span>
  </div>
))}

// 处理函数里直接用参数，不用管事件
handleCheckboxChange = (todoId, newCheckedState) => {
  this.props.dispatch(toggleTodo(todoId, newCheckedState));
}

这种方式代码更清晰，也完全避开了React事件池的限制，非常适合Todo这类场景～

总结 #

这个警告本质是React的性能优化策略导致的，核心就是别在事件处理函数执行完之后再访问合成事件对象的属性。上面三种方法都能解决你的问题，个人最推荐第三种，既简洁又不容易踩坑。

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