Блог

Я пытаюсь использовать внешнюю библиотеку JavaScript, которая недоступна в качестве модуля узла. Для этого я взял пример кода, описанный здесь, но мое приложение React продолжает терпеть неудачу при попытке получить доступ к свойствам, которые должны быть доступны через пространство имен внешней библиотеки (в качестве примера возьмем API Google Books здесь).

Код примера приложения:

 import React, { useEffect, useState } from 'react'

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
       const scriptTag = document.createElement('script');
       scriptTag.src = 'http://google.com/books/jsapi.js';
       scriptTag.addEventListener('load', () => {
            console.log('loaded!');
            setLoaded(true);
       });
       document.body.appendChild(scriptTag);
  }, []);

  useEffect(() => {
       if (!loaded) {
            console.log('not loaded yet');
            return;
       };
       let google: any;
       console.log(google.books);
  }, [loaded]);

  return (
       <div>Hello World</div>
  )
}

export default App; 

Ошибка, вызванная приложением в моем браузере:

При выполнении той же команды через консоль браузера после отображения страницы она работает нормально. Я не уверен, что меня здесь обманывает состояние гонки или что-то подобное, но я предполагал, что с помощью крючка useEffect с загруженным состоянием я смогу избежать таких побочных эффектов.

Anyone having an idea what I’m doing wrong?