React中无法遍历HashMap展示apiValidation接口返回数据求助

问题根因 #

• 你用forEach做遍历渲染：forEach没有返回值，遍历生成的JSX不会被React识别渲染，必须用map方法
• 回调参数用法错误：Object.keys()的遍历回调只能拿到当前键名、索引、原数组三个参数，你直接把对象的键名列在参数里无法获取到对应值
• 遍历逻辑不符合数据结构：apiValidation下的4个顶级字段（overall/forEachCategory/Organizational/scores）结构完全不同，不能用统一嵌套遍历逻辑，需要分字段单独处理

修正后的实现代码 #

// 渲染前先判断apiValidation已加载，避免空值报错
if (!apiValidation) return <div>数据加载中...</div>

return (
  <div className="validation-result">
    {/* 1. 渲染overall整体统计部分 */}
    <section>
      <h2>Overall 统计</h2>
      <p>正确：{apiValidation.overall.corect}</p>
      <p>错误：{apiValidation.overall.incorect}</p>
      <p>未确认：{apiValidation.overall.incert}</p>
    </section>

    {/* 2. 渲染forEachCategory分类统计部分 */}
    <section>
      <h2>分类统计</h2>
      {Object.keys(apiValidation.forEachCategory).map(categoryName => (
        <div key={categoryName} className="category-card">
          <h3>{categoryName}</h3>
          <p>正确：{apiValidation.forEachCategory[categoryName].corect}</p>
          <p>错误：{apiValidation.forEachCategory[categoryName].incorect}</p>
          <p>未确认：{apiValidation.forEachCategory[categoryName].incert}</p>
        </div>
      ))}
    </section>

    {/* 3. 渲染Organizational问题答案部分 */}
    <section>
      <h2>Organizational 问题列表</h2>
      {Object.keys(apiValidation.Organizational).map(questionName => (
        <div key={questionName} className="question-item">
          <h3>{questionName}</h3>
          <ul>
            {apiValidation.Organizational[questionName].map((answer, idx) => (
              <li key={idx}>{answer}</li>
            ))}
          </ul>
        </div>
      ))}
    </section>

    {/* 4. 渲染scores得分部分 */}
    <section>
      <h2>得分统计</h2>
      {Object.keys(apiValidation.scores).map(scoreCategory => (
        <div key={scoreCategory} className="score-card">
          <h3>{scoreCategory}</h3>
          {Object.entries(apiValidation.scores[scoreCategory]).map(([question, score]) => (
            <p key={question}>{question}：{score}分</p>
          ))}
        </div>
      ))}
    </section>
  </div>
)

额外注意事项 #

你贴的接口返回示例存在语法错误，缺少多个逗号分隔符，实际对接时要先确保接口返回的JSON格式合法，否则前端会直接出现解析报错。

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