如何修复Eslint箭头函数报错：Expected to return a value

问题原因 #

Eslint的consistent-return规则要求箭头函数的所有代码路径保持一致的返回行为——要么所有分支都返回值，要么都不返回。你的代码里，当show && inView为true时存在多个return分支，但条件不成立时没有返回任何值，触发了该规则的报错。

修复方案 #

1. 统一所有分支的返回行为 #

在条件不成立的代码块末尾添加return;，确保函数所有路径都有返回逻辑：

useEffect(() => {
    if (show && inView) {
        const timer = () => {
            setCount(count + 1);
        };
        if (count >= number) {
            setPlus('+');
            return;
        }
        const interval = setInterval(timer, 800 / number);
        return () => clearInterval(interval);
    }
    setCount(1);
    setPlus('');
    setShow(false);
    return; // 新增：让所有分支都有返回
}, [count, inView, number, show]); // 移除依赖中的plus，避免循环更新

2. 额外优化点 #

• 移除依赖数组中的plus：setPlus是React useState返回的更新函数，本身稳定不需要加入依赖；同时plus是你在useEffect中修改的状态，加入依赖会导致每次plus变化都触发useEffect，引发不必要的循环更新。
• 无需将setPlus('+')赋值给变量：setPlus作为状态更新函数没有返回值，直接调用即可。

另一种可选方案（禁用单条规则） #

如果不想修改代码结构，也可以在该行上方添加注释禁用consistent-return规则，但不推荐这种方式，因为规则本身是为了保证代码逻辑的一致性：

// eslint-disable-next-line consistent-return
useEffect(() => {
    // 原代码
}, [count, inView, number, show]);

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