处理 axios.get 中的错误和 react/js 中收到的数据

Question

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

用户搜索一个词并基于该词，程序使用搜索到的短语进入 link，然后获取数据并将其存储在 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 和 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]);

但是，有时如果用户输入不存在的搜索 link.. 应用程序崩溃，因为它试图循环显示不存在的数据。

我不太确定该如何处理。

在搜索组件中，我添加了这个小“if”语句以在搜索为空时停止执行任何操作（因为不存在这样的 link）：

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

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

当应用程序崩溃时 - 在控制台中显示从 const stockPrices 和 const stockDates 所在的行报告的“无法将 undefined 或 null 转换为对象”。

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

只是为了上下文，存储在这些变量中的数据然后被传递以呈现包含价格（Y 轴）和日期（X 轴）的图表，因此它至少需要某种替换..

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

我尝试这样做是为了用 'null' 替换错误的提取 || 'undefined' 但它仍然崩溃。

请帮忙。

简而言之：如果应用试图从不存在的 link 中获取数据（基于搜索栏的输入）

，则会崩溃

Answer 1

我不确定您遇到的搜索问题是什么错误。

另一个是将 undefined 传递给 Object.keys 或 Object.values 函数时出现的错误。

我猜 API returns 一些无效链接的数据，所以图表不是未定义的。在代码中，您正在检查以确保 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]);

不过我觉得还是把fetch code修改一下比较好

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

处理 axios.get 中的错误和 react/js 中收到的数据

Handle error in axios.get and data received in react/js

javascript

fetch

reactjs

axios