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"

现在，当我点击 save (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 ...

只有当我点击ctrl+s即保存文件时，该call才会起作用，否则它将抛出Unhandled Promise rejection...因为它没有登录，但是我已经在useEffect中编写/提供了登录。

Answer 1

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

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

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

将连接/登录移动到单个 useEffect 也更好。

Answer 2

• 两个 useEffect 都在挂载上运行，但是 ¿ 先哪个？

• 尝试将这两个函数放在同一个 useEffect 中，并按顺序调用它们：

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

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

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