Обработать ошибку в axios.get и данные, полученные в react/js

Я изо всех сил пытаюсь понять, как предотвратить сбой моего приложения после получения данных из API. Вот что я сделал до сих пор:

Пользователь ищет слово, и на основе этого слова программа переходит по ссылке с искомой фразой, затем извлекает и сохраняет данные в константе.

var baseUrl = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${search}&apikey=****`;

${search} = все, что пользователь вводит в строку поиска

тогда baseUrl — это веб-сайт, используемый для получения всех данных из API.

  useEffect(() => {
      axios.get(baseUrl)
      .then(res => {
        setChart(res.data);
        // console.log(res.data)
      })
      .catch(error => {
        console.log("there was an error: " + error);
      })
  }, [baseUrl]);

   useEffect(()=>{}, [chart]);

затем программа проходит через API и сохраняет DATE и PRICE для каждой записи в const цены на акции и акцииДаты.

      const stockPrices = useMemo(() => chart && Object.values(chart['Time Series (Daily)']).map(i => i['1. open']).reverse(), [chart]); 
      const stockDates = useMemo(() => chart && Object.keys(chart['Time Series (Daily)']).map(x => x.replace(/\d{4}-/, "")).reverse(), [chart]);

Однако иногда, если пользователь вводит поиск, для которого нет существующей ссылки... приложение аварийно завершает работу, поскольку оно пытается зациклиться и отобразить несуществующие данные.

Я не совсем уверен, как справиться с этим.

В компоненте поиска я добавил этот небольшой оператор «если», чтобы он не делал ничего, если поиск пуст (поскольку такой ссылки не существует):

  const handleSearch = (e) => {
    e.preventDefault();
    if (e.target.value !== ``) {
    setSearch(e.target.value.toUpperCase())
    }};

Однако это решает лишь малую часть проблемы. Если приложение пытается получить данные по недействительной ссылке, оно просто падает.

когда приложение вылетает - в консоли пишет «Невозможно преобразовать undefined или null в объект», о чем сообщается из строки, в которой сидят постоянный запасЦены и постоянный запасДаты.

Как я могу остановить получение данных приложением, если ссылка не существует - как справиться с этой ошибкой?

просто для контекста данные, хранящиеся в этих переменных, затем передаются для отображения диаграммы с ценами (ось Y) и датами (ось X), поэтому необходимо, по крайней мере, иметь какую-то замену.

if(typeof stockDates === 'undefined') {
    return ('undefined');
} else if(stockDates=== null){
    return ('null');
} 

Я попытался сделать это, чтобы заменить неправильную выборку на «ноль» || 'undefined', но он все еще падает.

Пожалуйста помоги.

КОРОЧЕ: Приложение аварийно завершает работу, если оно пытается получить данные по несуществующей ссылке (на основе ввода из панели поиска).

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я не уверен, с какой ошибкой вы столкнулись при поиске.

Другая ошибка, которую вы получаете, когда передаете undefined в Object.keys или Object.values функцию.

Я предполагаю, что API возвращает некоторые данные для недействительных ссылок, поэтому диаграмма не является неопределенной. В коде вы проверяете, чтобы chart не было неопределенным. Но, скорее всего, chart['Time Series (Daily)'] не определено.

Я недостаточно знаю о ваших требованиях, чтобы предложить исправление. Но можно было бы добавить дополнительную проверку и сделать так...

const stockPrices = useMemo(() => chart && chart['Time Series (Daily)'] && Object.values(chart['Time Series (Daily)']).map(i => i['1. open']).reverse(), [chart]); 
const stockDates = useMemo(() => chart && chart['Time Series (Daily)'] && Object.keys(chart['Time Series (Daily)']).map(x => x.replace(/\d{4}-/, "")).reverse(), [chart]);

Но я думаю, что было бы лучше исправить код выборки.

axios.get(baseUrl)
.then(res => {
    if (res.data?.['Time Series (Daily)']) {
        setChart(res.data);
    }
    else {
        setChart(undefined);
        //maybe set some error states so you can display the appropriate message?
    }
})

Короче говоря, это приложение для фондовой биржи... скажем, пользователь пытается найти акции Apple, которые имеют символ "AAPL" и случайно вводит APPLE - тогда приложение вылетает, потому что он заставит приложение получить эту ссылку: alphavantage.co/… и это плохая ссылка... alphavantage.co/… <--- это правильная

Matt Szumilo 17.05.2022 06:04

я рассмотрю ваше предложение и посмотрю, поможет ли оно .. спасибо

Matt Szumilo 17.05.2022 06:05

о, я понимаю, что вы говорите - это интересно..

Matt Szumilo 17.05.2022 06:06

Это закрытый ключ API?...

thurasw 17.05.2022 06:13

@MattSzumilo, ты решил это?

VMT 17.05.2022 06:15

если вы используете «демо» для API, это бесплатная версия .. но у меня все равно есть бесплатный ключ API. @thurasw ваша версия const stockPrices и const stockDates помогла предотвратить сбой приложения! И я могу вернуться и повторно ввести название акции, и если это правильный символ, он получит правильные данные !!! Не могли бы вы объяснить логику этого способа?

Matt Szumilo 17.05.2022 23:18

эй @VMT да, ответ thurasw был именно тем, что мне было нужно! Я думаю, что его ответ проверяет, есть ли данные на диаграмме, а на диаграмме -> временные ряды ежедневно, и только затем он сохраняет данные ... это предотвратило сбой приложения.

Matt Szumilo 17.05.2022 23:20

еще раз спасибо THURASW !!! Я был на грани отказа от этого проекта - я действительно ценю это. ... и спасибо всем, кто помог решить эту проблему <3

Matt Szumilo 17.05.2022 23:24

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