从 useEffect 访问上下文

Question

我有一个上下文，用于在我的应用程序执行长时间运行的任务时显示整页微调器。

当我尝试在内部访问它时，useEffect我收到一条react-hooks/exhaustive-depsESLint 消息。例如，下面的代码，虽然它按预期工作，但声明busyIndicator缺少依赖项：

const busyIndicator = useContext(GlobalBusyIndicatorContext);

useEffect(() => {
    busyIndicator.show('Please wait...');
}, []);

这篇文章建议我可以包装useCallback可能如下所示的函数：

const busyIndicator = useContext(GlobalBusyIndicatorContext);
const showBusyIndicator = useCallback(() => busyIndicator.show('Please wait...'), []);

useEffect(() => {
    showBusyIndicator();
}, [showBusyIndicator]);

尽管这有效，但它已将问题移至useCallback现在抱怨缺少依赖项的行。

在这种情况下可以忽略 ESLint 消息还是我错过了什么？

Answer 1

如果您busyIndicator在组件的生命周期内没有更改，您可以简单地将其作为依赖项添加到useEffect：

const busyIndicator = useContext(GlobalBusyIndicatorContext);

useEffect(() => {
    busyIndicator.show('Please wait...');
}, [busyIndicator]);

如果busyIndicator可以更改并且您不想看到错误，那么您可以使用useRef钩子：

const busyIndicator = useRef(useContext(GlobalBusyIndicatorContext));

useEffect(() => {
    busyIndicator.current.show('Please wait...');
}, []);

useRef() 钩子不仅仅用于 DOM 引用。“ref”对象是一个通用容器，其当前属性是可变的并且可以保存任何值，类似于类上的实例属性。阅读更多