Estoy luchando por descubrir cómo evitar que mi aplicación se bloquee después de obtener datos de una API. Esto es lo que he hecho hasta ahora:
El usuario busca una palabra y, en función de esa palabra, el programa va a un enlace con la frase buscada, luego obtiene y almacena datos en una constante.
var baseUrl = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${search}&apikey=****`; ${search} = lo que el usuario ingrese en la barra de búsqueda
entonces baseUrl es el sitio web utilizado para obtener todos los datos de la 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]);luego, el programa recorre la API y almacena FECHA y PRECIO para cada entrada en const stockPrices y stockDates .
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]);Sin embargo, a veces, si el usuario ingresa una búsqueda para la cual no hay un enlace existente... la aplicación falla, ya que está tratando de hacer un bucle y mostrar datos que no existen.
No estoy muy seguro de cómo manejar esto.
En el componente de búsqueda, agregué esta pequeña declaración "si" para evitar que haga algo si la búsqueda está vacía (porque no existe tal enlace):
const handleSearch = (e) => { e.preventDefault(); if (e.target.value !== ``) { setSearch(e.target.value.toUpperCase()) }};Sin embargo, esto solo resuelve una pequeña parte del problema. Si la aplicación intenta obtener datos de un enlace no válido, simplemente falla.
cuando la aplicación falla, en la consola dice "No se puede convertir indefinido o nulo en objeto", que se informa desde la línea donde se encuentran const stockPrices y const stockDates .
¿Cómo puedo evitar que la aplicación obtenga datos si no existe un enlace? ¿Cómo manejar este error?
solo por contexto, los datos almacenados en esas variables se pasan para representar un gráfico con precios (eje Y) y fechas (eje X), por lo que al menos necesita tener algún tipo de reemplazo.
if(typeof stockDates === 'undefined') { return ('undefined'); } else if(stockDates=== null){ return ('null'); }Intenté hacer esto para reemplazar la búsqueda incorrecta con 'null' || 'indefinido' pero sigue fallando.
Por favor ayuda.
EN RESUMEN : la aplicación falla si intenta obtener datos de un enlace que no existe (basado en la entrada de la barra de búsqueda)
No estoy seguro de qué error está enfrentando con el problema de búsqueda.
El otro es el error que obtiene cuando pasa undefined a la función Object.keys u Object.values .
Supongo que la API devuelve algunos datos para enlaces no válidos, por lo que el gráfico no está indefinido. En el código, está comprobando que el chart no esté indefinido. Pero lo más probable es que chart['Time Series (Daily)'] no esté definido.
No sé lo suficiente sobre sus requisitos para sugerir una solución. Pero podría agregar un control adicional y hacerlo así...
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]);Pero creo que sería mejor arreglar el código de búsqueda.
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? } })