前端之家

  1. 首页
  2. 问答

如何在useCallback中使用全局对象而不将其作为依赖项（删除警告）

• 问答

我在使用Reacts useCallback挂钩时有此警告。

React Hook useCallback缺少依赖项：“历史记录”。包含它或删除依赖项array.eslint（react-hooks / exhaustive-deps 

    import { useHistory } from "react-router-dom";

    const MyFunctionalComponent = () => {

       const history = useHistory();

       ....

       const someFunction = useCallback(((param) => {
           history.push({
               search: `?myParam=${param}`
           });
           ....
       }),[history]); <-- Putting history object here removes the warning...

       return (
            <Fragment>
               <Something onClick={() => someFunction(myParam)}
            </Fragment>
       );
    }

将历史记录对象放在useCallback依赖参数中可删除警告，但将其作为此方法的依赖项是没有意义的。此方法不依赖于历史记录的状态，它只是调用它来更新历史记录。此外，我怀疑每次历史记录更改时我的父组件都会重新呈现，这违反了使用useCallback的目的。

我的问题是如何在useCallback方法中使用历史记录对象：

  1. 在没有编译器警告的情况下（ React Hook useCallback缺少依赖项：'history'。要么包含它，要么删除依赖项array.eslint（react-hooks / exhaustive-deps ）
  2. 未在警告中放置忽略语句（ // eslint-disable-line react-hooks / exhaustive-deps ）
  3. 不使用window.history，因为使用useLocation（）钩子无法正常工作。历史更改事件不是由window.history触发的。因此，不能按照本文中的示例使用useEffect和useLocation挂钩：https://reacttraining.com/blog/react-router-v5-1/?fbclid=IwAR1WHJKKeF0rO_-jW31mRCatWq5o143OvgyURn6R3uGlHNQ_dqs3QQ4ddLs
a270207 回答：如何在useCallback中使用全局对象而不将其作为依赖项（删除警告）

在将历史记录包含在依赖项列表中时，您是否遇到任何问题？对我来说效果很好，我没有发现任何额外的渲染。

不要忘记，仅更改历史记录状态（例如，导航）只是对现有历史记录对象进行突变，而不会创建其他对象，因此useCallback不会检测到更改

,

对于那些想知道如何解决问题的人，我是这样解决的：

const navigateTo = React.useRef(history.push).current;
const handleLogUserOut = React.useCallback(() => {
    // Handle app logic...
    navigateTo('/login');
},[ navigateTo ]);

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

我基本上将 history.push 方法放在 React.useRef 内并直接调用它，这样我就不必依赖整个 history 对象，从而导致无限循环

historyreactjsusecallback
本文链接：https://www.f2er.com/2802706.html

大家都在问