Alan AI Error Uncaught Error: экземпляр Alan Button уже создан. Одновременно не может быть создано два экземпляра Алана Баттона

Я разрабатываю веб-сайт электронной коммерции с голосовым управлением AI, используя Alan AI. Но всякий раз, когда я возвращаюсь с другого маршрута, появляется пустая страница. И это сообщение об ошибке отображается в консоли: «Неперехваченная ошибка: экземпляр Алана Баттона уже создан. Одновременно не может быть создано два экземпляра Алана Баттона». Что я могу сделать? мой код приведен ниже:

const Alan = () => {

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

    return (
        <div>

        </div>
    );
};
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это критично, но легко...!

Используйте запросAnimationFrame для визуальных изменений веб-страницы.

Если запустить как обратный вызов requestAnimationFrame, это будет запускаться в начале кадра.

const Алан = () => {

useLayoutEffect(() => {
    function updateScreen(time) {
        // Make visual updates here.
        alanBtn({
            key: alanKey,
            onCommand: ({ command }) => {
                if (command === 'testCommand') {
                    alert('This code was executed');
                }
            }
        })
    }

    requestAnimationFrame(updateScreen);
}, [])

return (
    <div>

    </div>
);

};

Другие вопросы по теме