【React工作记录一百一十七】hook项目实例之原始数据形成ant design table表格

前端大歌谣

于 2023-05-24 14:31:15 发布

阅读量143

点赞数 1

分类专栏：前端项目工作实战文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/geyaoisnice/article/details/130845448

版权

前端项目工作实战专栏收录该内容

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文记录了一次React项目中如何使用Hook处理从postgrest获取的层级数据，将其转化为Ant Design表格所需的column和dataSource格式。内容包括数据格式分析、处理过程、查询数据的方法、重置和过滤逻辑的实现，以及最终结果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

大家好我是歌谣由于项目最近使用的数据统一由postgrest定义所以返回的数据只能是
各个表之间的层级关系

数据格式

[
  {
    "id": 1,
    "code": "JP",
    "name": "皮夹克",
    "t_base_style": [
      {
        "id": 66,
        "code": "JPAP12019",
        "name": "JPAP12019",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 430,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 66,
            "t_qc_reference_standard": [
              {
                "id": 27,
                "style_id": 66,