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

Question

我在使用 Reacts useCallback 钩子(Hook)时有这个警告。

React Hook useCallback 缺少依赖项:“history”。包含它或删除依赖项 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>
       );
    }

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

我的问题是如何在我的 useCallback 方法中使用 history 对象:

1. 没有编译器警告(React Hook useCallback 缺少依赖项:'history'。要么包含它，要么删除依赖项 array.eslint(react-hooks/exhaustive-deps)
2. 没有为警告添加忽略语句(//eslint-disable-line react-hooks/exhaustive-deps)
3. 不使用 window.history，因为这在使用 useLocation() Hook 时效果不佳。历史变化事件不是由 window.history 触发的。因此，不能按照本文中的示例使用 useEffect 和 useLocation Hook :https://reacttraining.com/blog/react-router-v5-1/?fbclid=IwAR1WHJKKeF0rO_-jW31mRCatWq5o143OvgyURn6R3uGlHNQ_dqs3QQ4ddLs

Answer 1

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

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 对象，导致死循环