如何在 useEffect 中使用自定义挂钩？

Question

我正在使用Amazon 的 React Chime SDK 组件库。组件库有许多组件和钩子可供使用。

其中一个组件是<LocalVideo />. 问题是它开始时视频被禁用。为了打开它，您可以使用 hook useLocalVideo()。

在我看到的示例中，他们使用按钮来执行挂钩：

const MyComponent = () => {
  const togglevideo = { useLocalVideo };

  return(
    <>
      <LocalVideo />
      <button onClick={toggleVideo}>Toggle</button>
    </>
  );
};

这很好用。但是如果我希望 LocalVideo 组件加载启用怎么办？例如，如果我不希望有人必须单击按钮？

我尝试了几种不同的方法，包括：

1. 将代码直接添加到组件中（我认为这不起作用，因为在 LocalVideo 组件渲染完成之前调用了钩子）。
2. 添加里面的代码useEffect（无效的Hook调用错误）。

例如：

const MyComponent = () => {
  useEffect( () => {
    useLocalVideo();
   },
  );

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

  useEffect( () => {
    setIsVideoEnabled(true);
  }, []
 );

如何让这个钩子在组件渲染后运行？

Answer 1

toggleVideo您应该调用内部的函数useEffect，而不是钩子useLocalVideo本身：

const MyComponent = () => {
  const { togglevideo } = useLocalVideo();

  useEffect(() => {
    togglevideo();
  }, []);

  return (
    <LocalVideo />
  );
};