我正在开发一个使用Alan AI的AI驱动的电子商务网站语音命令功能。但是，每当我从另一个路由返回时，就会出现一个空白页面，并且控制台中显示此错误消息：“未捕获的错误：Alan按钮实例已被创建。不能同时创建两个Alan按钮实例”。我该怎么办？我的代码如下所示：

const Alan = () => {    useEffect(() => {        alanBtn({            key: alanKey,            onCommand: ({ command }) => {                if (command === 'testCommand') {                    alert('This code was executed');                }            }        })    }, [])    return (        <div>        </div>    );};

回答：

这很关键但也很简单…！

使用requestAnimationFrame来处理网页的视觉变化。

如果作为requestAnimationFrame的回调函数运行，这将在帧开始时执行。

const Alan = () => {  useLayoutEffect(() => {    function updateScreen(time) {      // 在这里进行视觉更新。      alanBtn({        key: alanKey,        onCommand: ({ command }) => {          if (command === 'testCommand') {            alert('This code was executed');          }        }      })    }    requestAnimationFrame(updateScreen);  }, [])  return (    <div>    </div>  );};