时间戳

首页 > 解决方案 > 响应多个 api 请求

reactjs - 响应多个 api 请求

问题描述

所以作为我的个人项目，我想追踪所有的 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;

标签： reactjsapiaxiosreact-hooks

解决方案

结构不对，应该是：

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

当你这样做

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

它试图找到gmeData, amcData, teslaData, pltrData里面allStockData不存在的值

您可以在此处查看示例，只需取消注释行，看看您会得到什么错误

推荐阅读