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

Question

我正在与 Amazon's Chime SDK Component Library for React 合作。组件库有大量的组件和hooks可供使用。

其中一个组件是 <LocalVideo />。问题是它从禁用视频开始。为了打开它，你使用钩子 useLocalVideo().

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

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

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

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

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

将代码直接添加到组件（这不起作用，我假设是因为在使用 LocalVideo 组件完成渲染之前调用了挂钩）。
在useEffect中添加代码（无效的Hook调用错误）。

例如：

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

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

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

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

Answer 1

您应该在 useEffect 中调用函数 toggleVideo，而不是挂钩 useLocalVideo 本身：

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

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

  return (
    <LocalVideo />
  );
};

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

How do I use a custom hook inside of useEffect?

reactjs

react-hooks

amazon-chime

aws-chime-sdk