reactjs - 从 useEffect 访问上下文

Question

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

当我尝试在 useEffect 内访问它时，我收到一条 react-hooks/exhaustive-deps ESLint 消息。例如，以下代码虽然按预期工作，但指出 busyIndi​​cator 缺少依赖项:

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

如果您的 busyIndi​​cator 在组件的生命周期内没有更改，您只需将其作为依赖项添加到 useEffect 即可:

const busyIndicator = useContext(GlobalBusyIndicatorContext);

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

如果可以更改 busyIndi​​cator 并且您不想看到错误，那么您可以使用 useRef Hook :

const busyIndicator = useRef(useContext(GlobalBusyIndicatorContext));

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

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class. read more