React onClick 事件中使用 e.target.value 报错

在使用React 16.12.0 版本的时候写了如下一个函数

const judgeUserExist = () => {
        // 在搜索的过程中需要去判断用户是否存在, 需要做节流操作
        let pTime = Date.now();
        let timer:any = null;
        return function (e: any) {
            clearTimeout(timer);
            timer = null;
            let cTime = Date.now();
            if ((cTime - pTime) > 500) {
                setSearchValue(e.target.value);  
                pTime = cTime;
            } else {
                timer = setTimeout(() => {
                    setSearchValue(e.target.value);  //此处报错 ， e.target 为 null 
                }, 500)
            }            
        }
    }

使用后直接在浏览器中报错，

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.
此时点击链接跳到 React 官网事件池中，可以看到以下有关事件池的信息，明白了，原来是 没有加 e.persist(); 加了之后，果然不报错了，哈哈哈

事件池

注意

此文章仅适用于 React 16 及更早版本、React Native。

Web 端的 React 17 不使用事件池。

查看更多关于 React 17 中的相关改动。

SyntheticEvent 对象会被放入池中统一管理。这意味着 SyntheticEvent 对象可以被复用，当所有事件处理函数被调用之后，其所有属性都会被置空。例如，以下代码是无效的：

function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

如果你需要在事件处理函数运行之后获取事件对象的属性，你需要调用 e.persist()：

function handleChange(e) {
  // Prevents React from resetting its properties:
  e.persist();

  setTimeout(() => {
    console.log(e.target.value); // Works
  }, 100);
}