React useEffect提示缺少dataState依赖但添加会触发无限循环如何解决

问题原因 #

你收到警告的核心原因是useEffect内部引用了外部的dataState响应式变量，React的Hook校验规则要求所有在effect内部用到的外部响应式变量都必须放入依赖数组。但如果直接把dataState放入依赖数组，每次setDataState执行都会更新dataState，进而重新触发effect运行，就形成了无限循环。

解决方案 #

你可以使用useState更新函数的函数式更新语法，直接在更新回调中拿到最新的state值，不需要在effect外部引用dataState，即可同时解决依赖警告和无限循环问题：

// 如果树视图有新的选中地点，更新网格状态
useEffect(() => {
    setDataState(prevState => {
        return {
            ...prevState,
            filter: {
                logic: 'and',
                filters: [
                    {
                        field: 'location',
                        operator: 'contains',
                        value: selectedLocation,
                    },
                ],
            },
        };
    });
}, [selectedLocation]);

这种写法下：

• 函数式更新的prevState参数永远是状态的最新值，不需要主动捕获外部的状态变量
• effect内部没有引用外部的dataState变量，校验规则不会再报依赖缺失警告
• 依赖数组仅保留selectedLocation，effect只会在选中地点变化时触发执行

可选兼容方案 #

如果特殊场景下不能使用函数式更新，也可以选择两种处理方式：

• 用useRef保存dataState的最新引用，每次dataState更新时同步更新ref值，在effect中读取ref的current属性获取最新状态，ref不属于响应式变量，不需要放入依赖数组
• 确认当前逻辑不存在状态不同步风险的前提下，可以在effect代码上方加// eslint-disable-next-line react-hooks/exhaustive-deps注释手动禁用这条校验规则，不过该方式不推荐常规场景使用

内容的提问来源于stack exchange，提问作者bbasmer