React遍历state发起多API调用时报Cannot read property 'state'错如何解决？

报错根因 #

你使用的是React函数组件，不存在this实例，代码中this.state.market是类组件的状态读取写法，直接调用this自然会抛出无法读取state属性的错误，函数组件读取状态直接使用声明的market变量即可。

其他存在的逻辑问题 #

• map回调中return fetch(...)后的代码永远不会执行，return语句会直接结束当前回调逻辑
• fetch返回Promise对象，遍历生成的是Promise数组，需要用Promise.all包裹才能等待所有请求执行完毕
• resp.json()是异步方法，必须加await才能拿到真实返回结果
• 不要在遍历请求过程中反复更新marketData，会导致状态反复覆盖，应该等所有请求返回后统一更新状态

修正后可运行代码 #

import { useState, useEffect } from 'react';

function Market() {
  // 状态声明建议放在组件最顶部
  const [market, setMarket] = useState(["SPY", "QQQ", "IWM", "DIA"]);
  const [marketData, setMarketData] = useState([]);

  const fetchMarketData = async () => {
    try {
      // 生成所有接口请求的Promise数组
      const requestPromiseList = market.map(async (marketSymbol) => {
        const response = await fetch(
          `https://sandbox.iexapis.com/stable/stock/${marketSymbol}/chart/1m?token=你自己的有效token`
        );
        return response.json();
      });
      // 等待所有请求执行完成拿到全量数据
      const allMarketHistoryData = await Promise.all(requestPromiseList);
      // 统一更新状态
      setMarketData(allMarketHistoryData);
      console.log(allMarketHistoryData);
    } catch (error) {
      // 增加错误捕获避免接口异常导致页面崩溃
      console.error('行情数据请求失败：', error);
    }
  };

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

  // 此处补充你的组件渲染逻辑
  return <div>行情组件内容</div>
}

额外注意事项 #

• 状态声明建议放在函数组件最顶部，符合React编码规范也避免闭包问题
• 不要将接口密钥硬编码在前端代码中，生产环境注意做好密钥防护
• 组件卸载时如果还有未完成的请求，建议增加取消请求的逻辑，避免内存泄漏

内容的提问来源于stack exchange，提问作者Binne