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-redux props传递的mousedown事件上的connect时，它们都为null。但是存在从父组件传递来的道具。我已经确认，在初始渲染时，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 props也为空。

是否可以在初始渲染后即在超时或connect事件之后访问props mousedown？

Answer 1

问题是您尚未在handleClickOutsideAutocomplete钩子的依赖项数组中添加useEffect函数，由于关闭，事件处理程序函数无法看到props的更新值。 / p>

解决方案

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

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

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

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

如何在不重新渲染的情况下访问redux connect mapStateToProps

1 个答案:

解决方案