如何访问redux-connect mapStateToProps而无需重新应答器



当用户在输入之外单击时,我正试图使用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 reduxconnectprops,如下所示:

useEffect(() => {
const timer = setTimeout(() => {
console.log("The connect props are all null", props);
}, 5000);
return () => clearTimeout(timer);
}, []); 

这里的反应还原connectprops也是空的。

是否可以在初始渲染后访问connectprops,即在超时或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软件包的一部分。每当您忽略或错误地指定依赖项时,它都会发出警告,并建议进行修复。

相关内容

  • 没有找到相关文章

最新更新