遍历Object.entries展示数据列表仅返回首项的问题求解

问题根因 #

你的代码只能返回第一个符合要求的条目，核心问题出在getMetrics函数的逻辑：函数内的return语句会直接终止整个函数执行，循环第一次匹配到key !== 'loss'的条目后就会立刻返回结果，不会继续遍历test属性下的剩余字段。

修复方案 #

你需要先把所有符合条件的条目收集起来，再统一返回。下面是两种常用实现方案：

方案1：返回数组渲染为列表（推荐） #

先修改getMetrics函数，将所有符合条件的条目存入数组后返回：

const getMetrics = (model) => {
  const validMetrics = []
  for (const [key, value] of Object.entries(model.test)) {
    if (key !== 'loss') {
      // 可根据需要调整展示格式，这里示例是 键: 值 的格式
      validMetrics.push(`${key}: ${value}`)
    }
  }
  return validMetrics
};

之后在渲染逻辑中遍历返回的数组即可，以React写法为例：

.map((i) => {
  const model = i.models[Object.keys(i.models)[0]];
  const metricList = getMetrics(model)
  return (
    <div className="metric-wrap">
      {/* 遍历所有符合条件的指标逐个渲染 */}
      {metricList.map((item, idx) => <span key={idx} className="metric-item">{item}</span>)}
    </div>
  )
})

方案2：返回拼接后的完整字符串 #

如果不需要单独处理每个指标，直接返回拼接好的文本即可：

const getMetrics = (model) => {
  const validMetrics = []
  for (const [key, value] of Object.entries(model.test)) {
    if (key !== 'loss') {
      validMetrics.push(`${key}${value}`)
    }
  }
  // 可自定义分隔符，比如换成空格、换行符等
  return validMetrics.join('、')
};

这个方案不需要修改原有渲染逻辑，直接调用getMetrics(model)就能拿到所有指标拼接后的完整内容。

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