如何访问JSON内层对象并将值写入Ant Design React项目的dataSource数组

方案1：提前处理原始数据，组装为标准dataSource #

这种方式适合需要多处使用price字段的场景，提前处理一次即可全局调用。
假设接口返回的原始单条数据结构如下：

{
  "id": 1,
  "name": "Bitcoin",
  "symbol": "BTC",
  "quote": {
    "USD": {
      "price": 30000,
      "percent_change_24h": 2.5
    }
  }
}

组件实现代码：

import { Table, useEffect, useState } from 'antd'

const CryptoPriceTable = () => {
  const [dataSource, setDataSource] = useState([])

  const fetchData = async () => {
    // 替换为你的实际接口请求逻辑
    const response = await fetch('你的业务接口地址')
    const rawData = await response.json()
    const originList = rawData.data || []

    // 遍历原始数组，提取内层价格字段组装新数组
    const formattedList = originList.map(item => ({
      // 保留原有需要的字段
      id: item.id,
      name: item.name,
      symbol: item.symbol,
      // 用可选链避免字段不存在导致报错，兜底值可按需修改
      usdPrice: item.quote?.USD?.price || 0
    }))

    // 赋值给dataSource
    setDataSource(formattedList)
  }

  useEffect(() => {
    fetchData()
  }, [])

  const columns = [
    {
      title: '币种名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '币种代码',
      dataIndex: 'symbol',
      key: 'symbol'
    },
    {
      title: 'USD价格',
      dataIndex: 'usdPrice',
      key: 'usdPrice',
      // 可选：格式化价格展示
      render: (val) => `$${val.toLocaleString()}`
    }
  ]

  return <Table rowKey="id" dataSource={dataSource} columns={columns} />
}

export default CryptoPriceTable

方案2：直接在表格列配置中读取内层字段 #

如果不需要多处使用price字段，可直接在列的render方法中读取，无需提前处理dataSource：

const columns = [
  // 其他列配置省略
  {
    title: 'USD价格',
    key: 'usdPrice',
    render: (_, record) => {
      const price = record.quote?.USD?.price || 0
      return `$${price.toLocaleString()}`
    }
  }
]

// 这种情况dataSource直接赋值原始接口返回的数组即可
setDataSource(originList)

注意事项 #

• 必须使用可选链?.操作符访问嵌套字段，避免quote、USD任意一层不存在时抛出错误导致页面白屏
• 兜底值可根据业务需求调整，比如不需要展示0的话可以替换为'--'
• 如果需要对价格做排序、筛选等表格操作，推荐使用方案1提前处理字段，性能更优

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