React中如何将axios返回的对象数组转换为嵌套结构适配react-table

数据转换实现 #

你之前写的转换方法混淆了对象和数组的处理逻辑：你拿到的data是对象数组，不是单个对象，Object.entries(data)拿到的是数组的索引和值的键值对，不是你要的对象字段，所以达不到预期效果。

正确的实现逻辑是直接用数组的map方法遍历每一项，按需拆解字段组装成目标结构即可，不需要用Object.fromEntries（这个API是用来把键值对数组转成单个对象的，不适合你的场景），代码示例如下：

// 进度状态枚举，和你需求里的配置一致
const PROGRESS_STATUS = {
  success: "The system reports success",
  error: "Has start and end date, but not processed",
  inactive: "No start date",
  inProgress: "Has start date, processing hasn't finished"
}

// 单条数据转换函数
const transformRawItem = (rawItem) => {
  // 先把要放到嵌套结构里的字段摘出来，剩下的通用字段保留在根层级
  const { status, total, processed, username, fullname, email, ...restBaseFields } = rawItem
  return {
    ...restBaseFields,
    // 组装progress嵌套对象
    progress: {
      total,
      processed,
      status: PROGRESS_STATUS
    },
    // 组装user嵌套对象
    user: {
      username,
      fullname,
      email
    }
  }
}

然后修改你的请求逻辑，拿到接口返回数据后先做转换再存到state：

const [ data, setData ] = useState([]);
const [ loadingData, setLoadingData ] = useState(true);

useEffect(() => {
    async function getData() {
        try {
          const resp = await axios.get(`${API_URL}${1}`, options)
          const rawData = resp.data.DATA;
          // 遍历数组完成全量转换
          const transformedData = rawData.map(item => transformRawItem(item))
          setData(transformedData);
        } catch (err) {
          console.error('数据请求失败', err)
        } finally {
          setLoadingData(false);
        }
    }
    if(loadingData) {
        getData();
    }
// 补全依赖项避免重复请求
}, [loadingData, options])

react-table 列配置优化 #

有两种常用方案可以满足你的传值需求：

方案1：直接绑定转换后的嵌套字段 #

如果要单独展示每个嵌套字段，accessor直接写嵌套路径即可：

{
    Header: '总任务数',
    accessor: 'progress.total',
    Cell: ({ cell: {value}}) => <ProgressTracker values={value}/>
},
{
     Header: '已处理数',
     accessor: 'progress.processed',
     Cell: ({ cell: {value}})=><ProgressTracker values={value}/>
},
{
  Header: '用户邮箱',
  accessor: 'user.email'
}

方案2：单个单元格传入整行多字段 #

如果需要在同一个单元格组件里拿到多字段值（比如把进度条和状态都放在同一个单元格展示），可以直接通过row.original取到当前行的完整数据：

{
  Header: '处理进度',
  Cell: ({ row }) => {
    // row.original就是当前行的完整转换后数据
    const { total, processed, status } = row.original.progress
    return <ProgressTracker total={total} processed={processed} status={status}/>
  }
}

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