Понедельник, 05 июня 2023 19:18

Highcharts и Open Exchange Rates API на реакте

Оцените материал
(3 голосов)

Тот же самый Highcharts, отображающий актуальные курсы валют по версии все того же openexchangerates.org, что и в статье, описывающей построение приложения на основе Ruby on Rails.

Сделаем все то же самое, но в этот раз - на реакте. В качестве результата получим одностраничный статичный сайт, который, в отличие от написанного на Ruby или PHP, мы абсолютно бесплатно зальем на хостинг GitHub в качестве живого демо.

 

Dev banner 1

 

Увидеть на гитхабе.

Highcharts с webpack или sprockets на Ruby on Rails

 

Highcharts и Open Exchange Rates API на реакте
Highcharts и Open Exchange Rates API на реакте

 

Последнюю ревизию кода всегда возможно найти в моем GitHub, репозиторий носит название Open-Exchange-Rates-API-React-Wrapper. Здесь же остановлюсь только на одном моменте, а именно: коллизии, которую вызывает некорректное использование useEffect. Если сделаем кое-как, что-нибудь в стиле, как показано, далее, это будет иметь следующие последствия: чарт будет работать и в консоли не будет заметно никаких ошибок, но только до первого клика по legend. А далее чарт обрушится:

 

  const [apiData, setApiData] = useState({});
  
  useEffect(() => {
    fetch(url, {
      method: "GET",
      headers: {
        accept: "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => setApiData(data));
  });

 

TypeError: Cannot read properties of undefined (reading 'layout')

 

Чтобы этого не произошло, используем useEffect правильно. Например, следующим образом:

 

  const [apiData, setApiData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch(url, {
        method: "GET",
        headers: {
          accept: "application/json",
        },
      })
        .then((res) => res.json())
        .then((data) => setApiData(data));

      return data;
    };
    fetchData();
  }, []);

 

Вот как-то так. Если есть дельные замечания по теме - не стесняйтесь прокомментировать сказанное здесь или на форуме.

Последнее изменениеСуббота, 08 июля 2023 03:02

Оставить комментарий

Добавьте ваш комментарий

Tic-Tac-Toe with a Neural Network