useEffect中的动态导入导致构造函数被调用两次

Question

我在useEffect中动态导入@vimeo/player，但在设置Player时，我得到的Uncaught (in promise) TypeError: You must pass either a valid element or a valid id.来自Vimeo脚本中的这一部分:

if (!isDomElement(element)) {
throw new TypeError('You must pass either a valid element or a valid id.');
}     } // Already initialized an embed in this div, so grab the iframe

所以我猜new Player构造函数被调用两次出于某种原因?当我使用正常导入时，这个错误不会出现-即使看起来setup被调用两次，无论是否动态导入，所以我有点困惑为什么这个错误只出现在动态导入中。我试着添加一个清理功能，但也没有帮助-感谢任何指示!

useEffect(() => {
let isSetup = false;
async function setup() {
if (!isSetup) {
const { default: Player } =  await import('@vimeo/player');
playerRef.current = new Player(
playerRef.current,
playerConfig,
);
isSetup = true;
playerRef.current.on('loaded', () => setIsLoading(false));
}
}

if (playerRef.current) {
setup();
}
return () => {
isSetup = false;
playerRef.current.destroy();
};
}, [playerRef]);

Answer 1

我不认为是任何导入引起的问题。

我建议删除useEffect钩子，因为它应该只在playerRef更改时执行，对吗?因此，您可以将您的代码移植到useCallback.

import { useCallback} from 'react';
// Open component
// ...
const onPlayerRefChange = useCallback((node) => {
// Insert your code here and `node` will be the mounted html element
)};
// ...
// Close component

在你的jsx中使用ref属性，像这样:

<div ref={onPlayerRefChange}></div>

这就是onPlayerRefChange函数将只在ref改变时被调用(如果元素没有多次改变，应该是1次，并且在你的代码中有另一个错误)。

我不确定isSetup的用途是什么，但如果你想使用，我建议将其移动到useState。

Answer 2

不能使用ref作为useEffect的依赖项。React不跟踪ref的状态。

由于StrictMode，您的代码可能会运行两次。