当用户在输入之外单击时,我正试图使用mousedown
事件来关闭自动完成。
代码:
// listen to mouse clicking outside of autocomplete or input
useEffect(() => {
document.addEventListener("mousedown", handleClickOutsideAutocomplete);
return () => {
document.removeEventListener("mousedown", handleClickOutsideAutocomplete);
};
}, []);
const handleClickOutsideAutocomplete = (e) => {
console.log("props:", props);
const { current: wrap } = wrapperRef;
if (wrap && !wrap.contains(e.target)) {
setisOpen(false);
}
};
此代码按预期运行。但是,当我尝试在通过react reduxconnect
传递的mousedown
事件上访问props
时,它们都为空。但是,从父组件传递的道具仍然存在。我已经确认,在最初的渲染中,react reduxconnect
道具如预期一样存在。
我认为mousedown
事件可能与此有关,所以我测试了使用超时访问react reduxconnect
props
,如下所示:
useEffect(() => {
const timer = setTimeout(() => {
console.log("The connect props are all null", props);
}, 5000);
return () => clearTimeout(timer);
}, []);
这里的反应还原connect
props
也是空的。
是否可以在初始渲染后访问connect
props
,即在超时或mousedown
事件时?
问题是您没有在useEffect
钩子的依赖数组中添加handleClickOutsideAutocomplete
函数,并且由于关闭,事件处理程序函数看不到props的更新值。
解决方案
在useEffect
钩子的依赖数组中添加handleClickOutsideAutocomplete
,并在useCallback
钩子中封装handleClickOutsideAutocomplete
,以避免每次重新渲染组件时都运行useEffect
钩子。另外,不要忘记在useCallback
钩子的依赖项数组中列出所需的依赖项。
useEffect(() => {
...
}, [handleClickOutsideAutocomplete]);
const handleClickOutsideAutocomplete = useCallback((e) => {
...
}, [props]);
React建议将exhaustive-deps rule
作为其eslint-plugin-react-hooks
软件包的一部分。每当您忽略或错误地指定依赖项时,它都会发出警告,并建议进行修复。