互联网连接值设置为true后如何运行useEffect？答案

【问题标题】：How to run a useEffect once after internet connected value is set to true?互联网连接值设置为true后如何运行useEffect？
【发布时间】：2022-11-03 18:17:38
【问题描述】：

在互联网连接状态解析为 true 后，我正在尝试在 useEffect 中运行多个函数。但一开始，状态将为空，然后它会解析为真。因此，将不会调用其余函数。如何解决这个冲突？

我只想运行一次函数

const Component = () => {
    const {isConnected} = useNetInfo();
    
    useEffect(() => {
        runFunctionOne();
        runFunctionTwo();
    }, []);

    const runFunctionOne = () = {
        if (!isConnected) return;
        // rest
    }

    const runFunctionTwo = () = {
        if (!isConnected) return;
        // rest
    }
}

【问题讨论】：

标签： reactjs react-native react-native-community-netinfo

【解决方案1】：

您可以尝试将 isConnected 作为依赖项传递给 useEffect。因此，只要 isConnected 更改，useEffect 挂钩就会重新运行。

【讨论】：

但我只想运行一次功能
@tharwi 如果您的 isConnected 值在那之后没有改变，那么它只会运行一次（当它从 null 翻转到布尔值时）
您可以将函数包装在钩子内的 if 块中。这样，一旦更改了 isConnected，函数就会运行。

【解决方案2】：

如果您希望效果只运行一次，您应该注意多个连接触发器。否则，如果您在线后断开连接，将再次触发该效果。

const wasConnectedRef = useRef(false);

useEffect(() => {
  if (isConnected && !wasConnectedRef.current) {
    runFunctionOne();
    runFunctionTwo();
    wasConnectedRef.current = true;
  }
}, [isConnected]);

【讨论】：