reactjs 如何在internet connected值设置为true后运行一次useEffect？

weylhg0b 于 2022-11-04 发布在 React

关注(0)|答案(3)|浏览(133)

我尝试在internet连接状态解析为true后运行useEffect中的几个函数。但在开始时，状态将为null，然后它将解析为true。因此，其余函数将不会被调用。如何解决此冲突？
我只想运行一次函数

const Component = () => {
    const {isConnected} = useNetInfo();

    useEffect(() => {
        runFunctionOne();
        runFunctionTwo();
    }, []);

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

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

reactjs

来源：https://stackoverflow.com/questions/74301235/how-to-run-a-useeffect-once-after-internet-connected-value-is-set-to-true

3条答案

按热度按时间

kjthegm61#

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

赞(0）回复(0）举报 2022-11-04

zvms9eto2#

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

const wasConnectedRef = useRef(false);

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

赞(0）回复(0）举报 2022-11-04

eh57zj3b3#

您可以使用setTimeout来确保已连接：

useEffect(() => {
       // functions will not be called until 6s have passed, hopefully you will be connected by then.
        setTimeout(() => {
            runFunctionOne();
            runFunctionTwo();       
        }, 6000);
    }, []);

如果您将尝试多次连接，甚至在经过6秒后也是如此，则需要添加isConnected作为依赖项

}, [isConnected]);

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 如何在internet connected值设置为true后运行一次useEffect？

3条答案

相关问题

热门标签

最新问答