React Native useEffect 适用于文件保存

Question

我正在使用 react-native-voximplant 开发一个视频聊天应用程序，一切正常，但是当应用程序第一次加载时，login 功能在 useEffect 中发生。所以，问题是，当我的 HomeScreen 安装时，useEffects' 应该触发并且我应该登录到 voximplant sdk，现在如果我点击呼叫图标，控制台中会显示以下内容：

当 HomeScreen 安装时：

LOG Client: emit: no handlers for event: AuthResult
LOG Error while trying to login to voximplant:  {"code": 491, "name": "AuthResult", "result": false}
LOG Client: emit: no handlers for event: ConnectionEstablished

现在当我点击通话拨打电话时：

// after a second...

WARN Possible Unhandled Promise Rejection (id: 0):
"NOT_LOGGED_IN"

现在，当我点击保存 (ctrl+s) 时，我会登录，现在如果我拨打电话，就可以了！我不知道我在这里做错了什么。 useEffect 有问题还是我做错了什么？

主屏幕代码：

import {Voximplant} from 'react-native-voximplant';

const HomeScreen = () => {
  const voximplant = Voximplant.getInstance();

  useEffect(() => {
    const signInToVoximplant = async () => {
      try {
        const fqUsername = '...'; // credentials are correct, don't worry about them.
        const password = '...';
        await voximplant.login(fqUsername, password);
      } catch (error) {
        console.log('Error while trying to login to voximplant: ', error);
      }
    };
    signInToVoximplant();
  }, []);

  useEffect(() => {
    const connect = async () => {
      const status = await voximplant.getClientState();
      if (status === Voximplant.ClientState.DISCONNECTED) {
        await voximplant.connect();
      } else if (status === Voximplant.ClientState.LOGGED_IN) {
        console.log('[INFO] VOXIMPLANT CONNECTED');
        return;
      }
    };
      connect();
    }, []);
  }
  
  return ...

call 只有在我点击 ctrl+s 时才有效，即保存文件，否则它会抛出 Unhandled Promise rejection... 因为它没有登录，但是我有 written/provided useEffect.

里面的登录

Answer 1

两个 useEffect 都是运行挂载的，但是 ¿ 哪个先？
尝试将两个函数放在同一个useEffect中，并按顺序调用它们：

useEffect(() => {
    const signInToVoximplant = async () => {
      ...
    };

    const connect = async () => {
      ...
    };

    signInToVoximplant();
    connect();
}, []);

Answer 2

根据您的日志，当应用程序启动时，登录失败并出现 491 错误，这意味着客户端处于无效状态。发生这种情况是因为您在建立 Voximplant 云连接（连接 API）之前调用登录 API。

当应用重新加载时，本地代码不会重新初始化（但 js 会），实际上客户端仍然连接到 Voximplant Cloud，这就是为什么第二次登录成功。

要解决此问题，您需要更改 Voximplant SDK API 调用的顺序：首先调用 Client.connect API 然后 Client.login.

也最好把connect/login移动到一个useEffect上。

React Native useEffect 适用于文件保存

React Native useEffect works on file save

javascript

reactjs

react-native

voximplant