如何在isConnected变为true后仅执行一次useEffect中的函数？

你可以通过新增状态标记函数执行状态，结合监听isConnected的变化来实现仅执行一次的需求，同时修复代码里的箭头函数语法错误：

const Component = () => {
    const {isConnected} = useNetInfo();
    const [hasRunFunctions, setHasRunFunctions] = useState(false);
    
    useEffect(() => {
        // 仅当连接状态明确为true且函数未执行过时触发逻辑
        if (isConnected === true && !hasRunFunctions) {
            runFunctionOne();
            runFunctionTwo();
            setHasRunFunctions(true);
        }
    }, [isConnected, hasRunFunctions]);

    const runFunctionOne = () => {
        // 此处无需再判断isConnected，外部已做严格校验
        // 业务逻辑代码
    }

    const runFunctionTwo = () => {
        // 业务逻辑代码
    }
}

逻辑说明： #

• 新增hasRunFunctions状态，用来记录目标函数是否已经执行过，初始值设为false。
• 将isConnected和hasRunFunctions加入useEffect的依赖数组，确保这两个值变化时触发副作用检查。
• 只有当isConnected明确变为true，且函数还未执行过的情况下，才执行两个目标函数，并把hasRunFunctions设为true，避免后续网络状态变化时重复执行。
• 原函数内部的if (!isConnected) return可以移除，因为外部已经做了精准的条件判断，减少冗余检查。

如果业务允许网络重连时再次执行函数，只需去掉hasRunFunctions的判断，保留isConnected === true的条件即可，但这样会在每次网络恢复时触发函数执行。

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