如何在useEffect中使用自定义钩子?

Question

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

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

在示例中，我看到他们使用一个按钮来执行钩子:

const MyComponent = () => {
const togglevideo = { useLocalVideo };
return(
<>
<LocalVideo />
<button onClick={toggleVideo}>Toggle</button>
</>
);
};

这很好。但是如果我想让LocalVideo组件加载启用呢?例如，如果我不想让别人点击一个按钮?

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

1. 直接将代码添加到组件(这并不工作,我认为因为渲染前的钩叫做LocalVideo组件完成)。
2. 增加useEffect内部的代码(无效钩子调用错误)。
例如:

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 />
);
};