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

Question

当用户在输入之外单击时，我正试图使用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事件时？

Answer 1

问题是您没有在useEffect钩子的依赖数组中添加handleClickOutsideAutocomplete函数，并且由于关闭，事件处理程序函数看不到props的更新值。

解决方案

在useEffect钩子的依赖数组中添加handleClickOutsideAutocomplete，并在useCallback钩子中封装handleClickOutsideAutocomplete，以避免每次重新渲染组件时都运行useEffect钩子。另外，不要忘记在useCallback钩子的依赖项数组中列出所需的依赖项。

useEffect(() => {
...
}, [handleClickOutsideAutocomplete]);        
const handleClickOutsideAutocomplete = useCallback((e) => {
...
}, [props]);                                 

React建议将exhaustive-deps rule作为其eslint-plugin-react-hooks软件包的一部分。每当您忽略或错误地指定依赖项时，它都会发出警告，并建议进行修复。