页面加载后我的第一个 api 请求总是失败答案

【问题标题】：My first api request always fails after page load页面加载后我的第一个 api 请求总是失败
【发布时间】：2021-05-20 12:37:30
【问题描述】：

我的 API 请求出现问题，在页面加载后总是失败。真的不知道我哪里错了。

这是我的请求，我在与 handleOpen 函数交互时调用它。

  const stock = {
    method: 'GET',
    url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
    params: {Mic: props.mic, Ticker: clickedElement.ticker},
    headers: {
      'x-rapidapi-key': 'XXX',
      'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
    }
  }

  const getStock = async () => {
    try {
      const res = await axios.request(stock);
        return res.data;
    }
    catch (error) {
      setOpen(false);
      console.error("catch api error: ", error);
    }
  }

  const handleOpen = name => {
    
    let findClickedStock = props.stocksArray.find(item => item.ticker === name)
    setClickedElement(findClickedStock)

    getStock().then((dataFromStockApi) => {
      let combined1 = { ...dataFromStockApi, ...findClickedStock }
      setStockObject(combined1);

    });
    setOpen(true);
  };

错误：

【问题讨论】：

404 表示没有这个url。确保您的网址正确。您可以使用一些软件来寻求帮助（例如邮递员）。它使请求检查更快。另外，请注意显示的错误消息。可能与SearchBar.js line 100 有什么关系
它与 react 或 axios 无关...您的 api-endpoint 有问题...首先在 postman 中测试您的端点

标签： javascript reactjs api axios react-hooks

【解决方案1】：

这是因为你的 Ticker 参数是空的。

当您创建“库存”时，clickedElement.ticker 未定义。

这样做：

    // pass name in as a parameter
    getStock(name).then(...)

让 getStock 像这样：

  const getStock = async (ticker) => {
    try {
      const res = await axios.request({
         method: 'GET',
         url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
         params: {Mic: props.mic, Ticker: ticker},
         headers: {
           'x-rapidapi-key': 'XXX',
           'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
         }
      });

      return res.data;
    }
    catch (error) {
      setOpen(false);
      console.error("catch api error: ", error);
    }
  }

【讨论】：