响应本机useEffect的文件保存工作

Question

我正在用react-native-voximplant开发视频聊天应用程序，一切正常，但是当应用程序第一次加载时，login功能在useEffect内部出现。因此，问题是，当我的HomeScreen挂载时，useEffects‘应该会触发，我应该会登录voximplant，现在如果我点击call图标，控制台中会显示以下内容：

当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是出了什么问题还是我做错了什么？

HomeScreen代码：

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即保存文件时，ctrl+s才能工作，否则它会抛出Unhandled Promise rejection...，因为它没有登录，但是我已经在useEffect中编写/提供了登录。

Answer 1

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

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

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

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

Answer 2

• 和useEffect都是在挂载上运行的，但是哪一个是第一个？

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

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

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

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