响应多个 api 请求

时间:2021-04-23 06:33:17

标签: reactjs api axios react-hooks

所以作为我的个人项目,我想跟踪所有 WSB stonks。不幸的是,我使用 alpha 优势的 api 使您对不同的符号提出了多个请求(如果我错了,请纠正我)。我想知道我是否可以只使用一种状态并在一个组件中映射它们,而不是为每个单独的符号设置多个状态并将它们多次通过同一个组件。正如您从下面的代码中看到的,我正在尝试将我的 gmedata、amcdata、tesladata 和 pltrdata 设置为一个名为 allstockdata 的变量,然后 setStock(allstockData) 但它失败了 =(

import stockApi from "../apis/stockApi";
import cryptoApi from "../apis/cryptoApi";

const StonkList = () => {
  const [cryptos, setCryptos] = useState([]);
  const [stocks, setStocks] = useState([]);
  const [gme, setGme] = useState([]);
  const [amc, setAmc] = useState([]);
  const [tesla, setTesla] = useState([]);
  const [palantir, setPalantir] = useState([]);

  const fetchData = async () => {
    const cryptoData = await cryptoApi.get("/coins/markets/", {
      params: {
        vs_currency: "usd",
        ids: "bitcoin, dogecoin",
      },
    });
    const gmeData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "GME",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const amcData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "AMC",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const teslaData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "TSLA",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const pltrData = await stockApi.get("", {
      params: {
        function: "TIME_SERIES_DAILY_ADJUSTED",
        symbol: "GME",
        apikey: "EZ8JMJUGE397BZEU",
      },
    });
    const [gmeData, amcData, teslaData, pltrData] = allStockData;
    setCryptos(cryptoData.data);
    setStocks(allStockData.data);
    console.log(cryptoData.data);
    console.log(allStockData.data);
  };

  useEffect(() => {
    fetchData();
  }, []);
  return <div></div>;
};
export default StonkList;

1 个答案:

答案 0 :(得分:3)

错误的结构,应该是:

const allStockData =  [gmeData, amcData, teslaData, pltrData];

当你这样做

const [gmeData, amcData, teslaData, pltrData] = allStockData;

它正在尝试在不存在的 gmeData, amcData, teslaData, pltrData 中查找 allStockData

您可以检查示例 here,只需取消注释行,看看您会得到什么错误