时间戳

首页 > 解决方案 > 如何在不重新渲染的情况下访问 redux 连接 mapStateToProps

reactjs - 如何在不重新渲染的情况下访问 redux 连接 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-redux 传递props的事件时，它们都是空的。然而，从父组件传递的道具是存在的。我已经确认在初始渲染时 react-redux道具如预期的那样存在。mousedownconnectconnect

我认为该mousedown事件可能与它有关，因此我测试connect props了使用超时访问 react-redux，如下所示：

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

这里的 react-reduxconnect props也是空的。

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

标签： reactjsreduxreact-redux

解决方案

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

解决方案

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

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

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

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

推荐阅读