在 React 中循环状态以进行多个 API 调用答案

【问题标题】：Looping though state in React for multiple API calls在 React 中循环状态以进行多个 API 调用
【发布时间】：2021-11-16 15:47:50
【问题描述】：

我正在尝试循环通过一个状态（市场）以对该状态中的每个元素执行提取调用，并将其存储在另一个状态（市场数据）中。但是它返回以下错误 ":Unhandled Rejection (TypeError): Cannot read property 'state' of undefined"

任何帮助将不胜感激。

function Market() {

useEffect(() =>{
    fetchMarketData();
  }, []);

const [market, setMarket] = useState(["SPY", "QQQ", "IWM", "DIA"]);
const [marketData, setMarketData] = useState([]);

  const fetchMarketData = async () => {
    const data = await this.state.market.map((market) => {
      return fetch(
        `https://sandbox.iexapis.com/stable/stock/${market}/chart/1m?token=key`
      );
      const marketHistoricalPrice = data.json();
      console.log(marketHistoricalPrice);
      setMarketData(marketHistoricalPrice);
    });
  }

【问题讨论】：

标签： reactjs loops fetch state

【解决方案1】：

你可以使用 Promise.all：

function Market() {

useEffect(() =>{
    const promises = fetchMarketData();
    Promise.all(promises).then(values => {
      setMarketData(values)
    })
  }, []);

const [market, setMarket] = useState(["SPY", "QQQ", "IWM", "DIA"]);
const [marketData, setMarketData] = useState([]);

const fetchMarketData = () => {
  const data = market.map(async (market) => {
     const res = await fetch(`https://sandbox.iexapis.com/stable/stock/${market}/chart/1m?token=key`)
     return res.json()
  };
}

【讨论】：

【解决方案2】：

如果你使用钩子 (useState) 那么你不需要this.state.market.map，只需使用market.map 就足够了

改成

const data = await market.map((market) => {

【讨论】：

【解决方案3】：

如果您使用钩子 (useState)，则不需要 this 关键字。您可以直接访问状态值。

 const data = await market.map((market) =>

【讨论】：