如何将React API返回的数字ID标识数据转换为props供其他组件使用

1. 预定义字段映射常量 #

提前把QuickBase返回的数字ID和自定义字段名做绑定，抽成全局常量避免硬编码，后续字段调整只需修改该配置：

// 可放在单独的配置文件或者组件顶部
const QB_FIELD_MAP = {
  3: 'projectName',
  6: 'projectTitle',
  40: 'startDate',
  80: 'completionRate'
  // 其他需要映射的字段按需补充
}

2. 接口返回后统一格式化数据 #

拿到接口原始响应后不要直接存入state，先做一层数据转换，将数字ID键替换为自定义键，注意不要使用arguments.callee、caller这类严格模式禁用的语法，这是你看到严格模式报错的核心原因：

// 类组件中的接口请求成功回调
handleQbFetchSuccess = (rawResponse) => {
  // 对返回的列表数据做格式化
  const formattedList = rawResponse.map(rawItem => {
    const processedItem = {}
    Object.keys(QB_FIELD_MAP).forEach(qbFieldId => {
      const customFieldName = QB_FIELD_MAP[qbFieldId]
      // 空值兼容，避免字段缺失传递undefined报错
      processedItem[customFieldName] = rawItem[qbFieldId] ?? ''
    })
    // 可按需保留原始数据的其他字段
    processedItem.rawItemId = rawItem.id
    return processedItem
  })
  // 格式化后再存入state
  this.setState({ projectDataList: formattedList })
}

3. 渲染前提前判空，安全传递props #

在render方法中先判断state内格式化后的数据是否存在，避免接口未返回时就渲染子组件导致props未定义报错：

render() {
  const { projectDataList } = this.state
  // 数据未加载完成时先渲染加载态，阻断子组件渲染
  if (!projectDataList?.length) return <div>数据加载中...</div>

  return (
    <div className="page-container">
      {/* 传递给Title组件 */}
      <Title 
        name={projectDataList[0].projectName} 
        title={projectDataList[0].projectTitle} 
      />
      {/* 传递给折线图组件，按需组装需要的结构 */}
      <LineChart 
        chartData={projectDataList.map(item => ({
          date: item.startDate,
          rate: item.completionRate
        }))}
      />
    </div>
  )
}

严格模式报错修复说明 #

你遇到的「严格模式下无法访问caller、callee和arguments属性」报错和字段映射逻辑无关，只需排查并删除代码中以下写法即可：

• 递归逻辑中使用arguments.callee引用函数自身
• 任何访问caller、arguments.caller属性的逻辑
• 函数参数重复命名等非严格模式兼容的语法

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