响应多个 api 请求答案

【问题标题】：React multiple api requests响应多个 api 请求
【发布时间】：2021-07-17 08:54:46
【问题描述】：

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

【问题讨论】：

看看我的回答，应该能帮到你:)
感谢兄弟，我是个菜鸟，我知道我在球场的某个地方 lmao

标签： reactjs api axios react-hooks

【解决方案1】：

结构错误，应该是：

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

当你这样做时

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

它试图在 allStockData 中查找不存在的 gmeData, amcData, teslaData, pltrData 值

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

【讨论】：