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（）钩不仅用于DOM引用。 “ ref”对象是一个通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。 read more

Answer 2

无需在useRef Hook中包装useContext。您只需调用useEffect方括号即可更新上下文数据这样。

const comingData = useContext(taskData);

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

从useEffect访问上下文

2 个答案: