React中映射API返回对象键值到列表遇map报错，求解决方案

错误原因分析 #

Uncaught TypeError: _stream$results.map is not a function 说明你调用map的stream?.results不是数组类型。大概率是API返回的results是对象结构（而非数组），或者数据还未加载完成时results为undefined/null。

解决方案与代码实现 #

1. 先处理数据类型判断与转换 #

如果API返回的stream.results是对象（键为国家代码，值为对应内容），需要先用Object.entries将其转换为键值对数组，再进行遍历。同时要添加数据加载状态判断，避免空值报错。

2. 完整React组件示例 #

import React from 'react';

const StreamProviders = ({ stream }) => {
  // 处理数据：如果results是对象则转为数组，否则默认空数组
  const resultsArray = stream?.results 
    ? (Array.isArray(stream.results) 
      ? stream.results 
      : Object.entries(stream.results))
    : [];

  if (resultsArray.length === 0) {
    return <div>No streaming data available</div>;
  }

  return (
    <div className="stream-providers">
      {resultsArray.map(([countryCode, countryData], countryIndex) => {
        // 提取购买和租赁的供应商列表
        const buyProviders = countryData.buy || [];
        const rentProviders = countryData.rent || [];

        return (
          <div key={countryCode} className="country-section">
            <h3>Country: {countryCode}</h3>
            
            {/* 渲染购买选项 */}
            {buyProviders.length > 0 && (
              <div className="option-section">
                <h4>Buy:</h4>
                <ul>
                  {buyProviders.map((provider, idx) => (
                    <li key={idx}>
                      {idx + 1}) Provider name: {provider.provider_name}
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {/* 渲染租赁选项 */}
            {rentProviders.length > 0 && (
              <div className="option-section">
                <h4>Rent:</h4>
                <ul>
                  {rentProviders.map((provider, idx) => (
                    <li key={idx}>
                      {idx + 1}) Provider name: {provider.provider_name}
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default StreamProviders;

3. 关键说明 #

• 数据类型兼容：通过Array.isArray判断stream.results类型，对象则用Object.entries转成[国家代码, 国家数据]的数组结构，确保可以用map遍历。
• 空值处理：用可选链?.和默认空数组避免数据未加载时的报错，同时添加空状态提示。
• 结构分层：按照国家→购买/租赁→供应商的层级渲染，匹配你预期的输出格式。

样式优化（可选） #

可以添加简单的CSS来匹配预期的缩进效果：

.country-section {
  margin: 1rem 0;
}
.option-section {
  margin-left: 1.5rem;
}
.option-section ul {
  margin-left: 1.5rem;
  list-style: none;
}

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