Reactjs 如何在无需重新加载程序的情况下访问redux connect MapStateTrops

我试图使用

mousedown

事件在用户在输入之外单击时关闭自动完成

代码：

此代码按预期运行。但是，当我试图访问通过react-redux

connect

传递的

mousedown

事件上的

props

时，它们都为空。但是，从父组件传递的道具仍然存在。我已经确认，在初始渲染时，react redux

connect

道具如预期的那样存在

我认为

mousedown

事件可能与此有关，因此我测试了使用超时访问react redux

connect

props

，如下所示：

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

这里的react redux

connect

道具也为空

在初始渲染后，即在超时或
mousedown
事件上，是否可以访问
connect
道具？
问题在于，您没有在
useffect
挂钩的依赖项数组中添加
handleClickOutsideAutocomplete
函数，并且由于关闭，事件处理程序函数看不到道具的更新值

解决方案
在
useffect
钩子的依赖项数组中添加
handleClickOutsideAutocomplete
，并在
useCallback
钩子中包装
handleClickOutsideAutocomplete
，以避免每次组件重新呈现时都运行
useffect
钩子。另外，不要忘记在
useCallback
hook的依赖项数组中列出所需的依赖项

useEffect(() => {
  ...
}, [handleClickOutsideAutocomplete]);        

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

React建议将其作为包装的一部分使用。当您忽略或错误指定依赖项时，它会发出警告，并建议进行修复。
谢谢。回答得很好，陈述得很清楚。非常感谢。
useEffect(() => {
  ...
}, [handleClickOutsideAutocomplete]);        

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