github 的地址 欢迎 star
前言
小明遇到了一个需求：在 input 框 change 的时候发起一个异步请求，对于请求一般做法都要防抖，但是却遇到了取不到 value 的值的情况。 简化代码可以查看 这里 关键代码：
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Input } from "antd";
import _ from "lodash";
const changeValue = e => {
const value = e.target.value;
console.log("sdj", e);
console.log("sdj", value);
const debugeDebounce = _.debounce(() => {
fetchAjax(e);
// fetchAjax(value);
}, 900);
debugeDebounce();
};
const fetchAjax = e => {
console.log("sdj222", e);
};
ReactDOM.render(
"Basic usage" onChange={changeValue} />,
document.getElementById("container")
);
复制代码在 fetchAjax 中取到的 e.target 为 null 的情况，在其中经过断点调试，发现了其中的缘由。
首先,在 changeValue 中，事件触发，就能获取到 event 对象，其中主要就是 event.target 就是当前触发事件的 dom 对象，由于 debounce 延迟执行，导致了 changeValue 函数已经执行完了，进入了 react-dom 中相关一系列操作(进行了一系列复杂的操作)，下面给出最关键的 executeDispatchesAndRelease，executeDispatchesAndRelease 方法释放 event.target 的值
/**
* Dispatches an event and releases it back into the pool, unless persistent.
*
* @param {?object} event Synthetic event to be dispatched.
* @private
*/
var executeDispatchesAndRelease = function(event) {
if (event) {
executeDispatchesInOrder(event);
if (!event.isPersistent()) {
event.constructor.release(event);
}
}
};
复制代码具体的可以自己断点查看相关 event 的值的变化
由于 event 在 debounce 中作为了参数，内存中没有清除，执行上面的方法 event.target = null; event 为引用类型，一处改变，所有用到的地方都会改变。导致了 debounce 中 event 也发生了变化。
解决
明白了上面的一些知识，就知道应该怎么修改代码了（把用到的值存在一个变量中）
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Input } from "antd";
import _ from "lodash";
const changeValue = e => {
const value = e.target.value;
console.log("sdj", e);
console.log("sdj", value);
const debugeDebounce = _.debounce(() => {
-- fetchAjax(e);
++ fetchAjax(value);
}, 900);
debugeDebounce();
};
const fetchAjax = e => {
console.log("sdj222", e);
};
ReactDOM.render(
"Basic usage" onChange={changeValue} />,
document.getElementById("container")
);
复制代码总结
工作中的一些问题还是值得去挖掘的，总会有一定的收获！这个问题中包括了内存释放，引用类型，事件等
如果有错误或者不严谨的地方，请务必给予指正，十分感谢!
参考
- stackoverflow.com/questions/2…
- developer.mozilla.org/zh-CN/docs/…