JS遍历对象数组生成表格列配置及CV字段渲染问题

核心问题定位 #

两个异常完全来自同一段逻辑的设计错误：

• 原代码把列生成的循环绑定在行数组遍历上：props.data.map(...)的循环执行次数等于数据总行数，而不是列的总字段数。比如表格有36个列、100行数据，循环只会执行100次，靠外部index计数根本遍历不完36个列的所有键，最终生成的列配置自然会漏掉后续的Job_title_name等字段。
• CV字段的链接绑定逻辑挂在同一个错误循环里：只有当某一次循环时，外部index的取值刚好匹配到CV字段在键列表中的位置，才会给当前正在遍历的那一行的CV值加链接，其他行的CV字段根本走不到判断分支，所以只有零星行的CV会渲染成链接。

修复方案 #

核心是分离「列生成」和「行数据渲染」两个独立逻辑，不要把列配置的生成绑定在行循环里：

1. 从首行数据提取所有列的字段名，作为列生成的循环来源（同结构表格不需要遍历所有行的键，拿第一行的键列表即可覆盖所有列）
2. 基于列名字典循环生成每个列的配置，处理隐藏状态、筛选规则、排序属性
3. 利用表格组件自带的单元格自定义渲染能力，为CV列绑定通用的渲染逻辑，实现所有行的CV字段统一加跳转链接，不需要手动遍历修改原始行数据

修复后可直接运行的代码 #

// 文件名存储逻辑，优化为读取自定义属性，避免直接操作DOM innerHTML的安全问题
function store_file_name(e) {
  const fileName = e.target.dataset.filename
  if (fileName) {
    localStorage.setItem('file_name', fileName)
  }
}

// 兜底空数据源，避免取第一行时报错
const dataSource = props.data || []
const filter_array = []
// 提取首行所有字段作为列列表
const allFieldKeys = Object.keys(dataSource[0] || {})
// 转成集合快速匹配需要默认展示的列
const defaultVisibleSet = new Set(default_refine_toggle_display || [])

const columns = allFieldKeys.map(fieldName => {
  // 计算列隐藏状态：匹配到默认展示列表的列不隐藏
  const isHidden = !defaultVisibleSet.has(fieldName)

  const columnItem = {
    dataField: fieldName,
    text: fieldName,
    filter: textFilter({
      getFilter: filter => {
        filter_array.push(filter)
      }
    }),
    sort: true,
    hidden: isHidden
  }

  // 给CV列加自定义单元格渲染，统一处理所有行的链接逻辑
  if (fieldName === 'CV') {
    columnItem.formatter = (cellValue) => {
      // 空值不渲染跳转链接
      if (!cellValue || cellValue === 'null') return cellValue
      return (
        <a
          onClick={store_file_name}
          className="link"
          href="/file_viewer"
          data-filename={cellValue}
        >
          {cellValue}
        </a>
      )
    }
  }

  return columnItem
})

console.log("当前列配置结果：", columns)
console.log("当前props.data结果：", props.data)

补充说明 #

• 这种实现方式不会修改原始props.data的结构，避免直接在源数据里塞React组件导致的状态更新异常
• 如果遇到不同行字段不完全一致的极端场景，可以把提取列的逻辑改成遍历所有行的键去重，再生成列配置即可，常规业务场景下不需要
• 原代码里的外部index变量可以完全删除，从根源上避免循环计数错位的问题

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