React应用切换货币时出现TypeError: cryptoData.map is not a function

排查步骤 #

• 确认API返回格式差异：切换货币后，在请求代码中打印API响应数据（或通过浏览器Network面板查看Response），检查EUR和USD请求返回的数据结构是否一致。如果USD请求返回的是对象而非数组，直接调用map就会触发错误。
• 检查状态更新逻辑：查看设置cryptoData的代码，是否错误地将整个API响应对象而非数组数据存入状态。比如API返回{ data: [...] }，但你执行了setCryptoData(response)而非setCryptoData(response.data)。
• 验证初始与加载状态：确认cryptoData的初始值是否为数组（如useState([])），若初始为null或undefined，切换货币时API请求延迟会导致未加载完成就执行map。同时检查是否缺少加载状态判断，导致数据未返回时触发渲染逻辑。
• 排查错误处理逻辑：查看API请求的catch块，是否误将错误信息存入cryptoData（如setCryptoData(error)），此时cryptoData为Error对象，无法执行map。

修复建议 #

• 统一数据提取逻辑：确保无论请求哪种货币，都从API响应中正确提取数组数据，同时增加格式校验：

  fetch(`https://your-api-url/crypto?currency=${selectedCurrency}`)
    .then(res => res.json())
    .then(apiRes => {
      // 校验数据是否为数组，避免格式错误
      const validData = Array.isArray(apiRes.data) ? apiRes.data : [];
      setCryptoData(validData);
    })
    .catch(err => {
      console.error('请求失败:', err);
      setCryptoData([]); // 错误时设为空数组，避免渲染报错
    });
  

• 渲染前增加类型校验：在调用map前先确认cryptoData是数组，避免非数组数据触发错误：

  return (
    <table>
      {Array.isArray(cryptoData) ? (
        cryptoData.map(item => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.price}</td>
          </tr>
        ))
      ) : (
        <tr><td colSpan="2">数据加载异常</td></tr>
      )}
    </table>
  );
  

• 确保初始状态为数组：初始化状态时设为空数组，避免未加载时的类型错误：

  const [cryptoData, setCryptoData] = useState([]);
  

• 核对API文档：确认不同货币参数下的返回格式是否统一，若API存在格式差异，需针对性处理响应数据。

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