从 useEffect 访问上下文

Question

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

当我尝试在useEffect 中访问它时，我收到react-hooks/exhaustive-deps ESLint 消息。例如，以下代码虽然按预期工作，但指出 busyIndicator 是缺少的依赖项：

const busyIndicator = useContext(GlobalBusyIndicatorContext);

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

This 文章建议我可以使用 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() Hook 不仅仅适用于 DOM 引用。 “ref”对象是一个通用容器，其当前属性是可变的并且可以保存任何值，类似于类上的实例属性。 read more

Answer 2

无需将您的 useContext 包装在 useRef Hook 中。 您可以更新您的上下文数据，只需调用 useEffect Brackets 像这样。

const comingData = useContext(taskData);

useEffect(() => {
console.log("Hi useEffect");
}},[comingData]); //context data is updating here before render the component