如何在useEffect中调用自定义hook实现Chime SDK LocalVideo默认开启

错误原因说明 #

1. 第一种在useEffect内部调用useLocalVideo的写法，违反了React Hook的调用规则：Hook只能在React组件的顶层作用域、或者自定义Hook的顶层作用域调用，不能嵌套在回调、条件判断、循环内部，所以会直接抛出非法Hook调用错误。
2. 第二种写法的Hook调用位置是合规的，没有触发Hook规则错误但不生效，是因为你把useEffect的依赖设为空数组，只会在组件首次挂载瞬间执行一次，此时Chime SDK的内部视频上下文、以及LocalVideo组件可能还未完成初始化，调用setIsVideoEnabled无法生效。

正确实现方案 #

首先确认前提：你的组件必须包裹在Chime SDK的ChimeProvider内部，否则useLocalVideo无法正常获取上下文状态。

基础适配版（适配绝大多数版本）

import { useEffect } from 'react';
import { LocalVideo, useLocalVideo } from 'amazon-chime-sdk-component-library-react';

const MyComponent = () => {
  const { isVideoEnabled, toggleVideo } = useLocalVideo();

  useEffect(() => {
    // 仅当视频未处于启用状态时触发开启操作
    if (!isVideoEnabled) {
      toggleVideo();
    }
  }, [isVideoEnabled, toggleVideo]); // 把依赖的状态和方法加入依赖数组，保证上下文更新后会重新触发判断

  return <LocalVideo />;
};

兼容特殊版本（需等组件完全挂载后触发）

如果以上方案还是无法自动开启，说明你的SDK版本需要等LocalVideo组件完全挂载到DOM后再执行操作，可以改用监听组件挂载的方式实现：

import { useEffect, useRef, useState } from 'react';
import { LocalVideo, useLocalVideo } from 'amazon-chime-sdk-component-library-react';

const MyComponent = () => {
  const { isVideoEnabled, toggleVideo } = useLocalVideo();
  const [videoMounted, setVideoMounted] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      setVideoMounted(true);
    }
  }, []);

  useEffect(() => {
    if (videoMounted && !isVideoEnabled) {
      toggleVideo();
    }
  }, [videoMounted, isVideoEnabled, toggleVideo]);

  return <div ref={videoRef}><LocalVideo /></div>;
};

内容的提问来源于stack exchange，提问作者Dave Mackey