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

Question

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

其中一个组件是<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 />
  );
};