处理Axios中的错误。在React/JS中收到的数据

Question

我正在努力弄清楚如何在从API获取数据后防止我的应用程序崩溃。这是我到目前为止所做的：

用户搜索一个单词并基于该单词，该程序转到带有搜索短语的链接，然后获取并将数据存储在const

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循环，并存储每个条目的日期和价格。

      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]);

但是，有时，如果用户输入没有现有链接的搜索。该应用程序崩溃了，因为它试图循环并显示不存在的数据。

我不太确定该如何处理。

在搜索组件中，如果搜索为空（因为不存在此类链接），我添加了这个小的“ IF”语句，以停止它做任何事情：

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

但是，这仅解决了问题的一小部分。如果该应用程序试图从无效链接中获取数据，则只会崩溃。

当应用崩溃时 - 在控制台中说 "Cannot convert undefined or null to object" which is reported from the line where const stockPrices and const stockDates are sitting on.

如果不存在链接，我该如何阻止该应用程序获取数据 - 如何处理此错误？

仅对于上下文，然后传递了这些变量中存储的数据以渲染以价格（y轴）和日期（x轴）的图表，因此它至少需要进行某种替换

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

。用“ null”获取|| “未定义”，但仍在崩溃。

请帮忙。

简称：应用程序崩溃，如果它试图从不存在的链接中获取数据（基于搜索栏的输入）

Answer 1

我不确定您在搜索问题上面临什么错误。

另一个是您将不确定 object.keys.keys 或object.values.values函数进行的错误。

我猜该API返回了一些无效链接的数据，因此图表并不是未定义的。在代码中，您正在检查以确保Chart不是未定义的。但最有可能的是，图表['时间序列（每日）']是未定义的。

我对您的要求不太了解，无法提出修复。但是您可以添加额外的检查并做到……

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?
    }
})