TypeScript-React Native：如何修改JSON响应按Plsectn分组MaintroomName

需求说明 #

需要将从SDK获取的JSON响应按Plsectn字段分组，把同一分组下的MaintroomName整理为指定的嵌套数据结构，当前已通过useEffect调用BtpBridgeModule.loadDataFromSdk获取数据，需调整数据处理逻辑。

原始数据结构 #

[
   {
      "Maintroom":"221",
      "MaintroomName":"gogi",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
   {
      "Maintroom":"222",
      "MaintroomName":"nahaleymenash",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
   {
      "Maintroom":"231",
      "MaintroomName":"gvul",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   },
   {
      "Maintroom":"232",
      "MaintroomName":"daro",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   }
]

目标数据结构 #

[
    {
      title: "pardehan",
      checked: false,
      data: [
        { key: "gogi", value: false, checked: false },
        { key: "nahaleymenash", value: false, checked: false }
      ],
    },
    {
      title: "meshulash",
      checked: false,
      data: [
        { key: "gvul", value: false, checked: false },
        { key: "daro", value: false, checked: false }
      ],
    }
]

实现代码 #

类型定义（TypeScript） #

先定义对应的数据类型，确保类型安全：

// 原始接口数据类型
interface RawRoomData {
  Maintroom: string;
  MaintroomName: string;
  Plsectn: string;
  PlsectnName: string;
}

// 分组后的子项类型
interface RoomItem {
  key: string;
  value: boolean;
  checked: boolean;
}

// 最终分组数据类型
interface GroupedRoomData {
  title: string;
  checked: boolean;
  data: RoomItem[];
}

数据转换函数 #

使用reduce方法完成分组转换：

const transformRoomData = (rawData: RawRoomData[]): GroupedRoomData[] => {
  // 按Plsectn分组构建临时对象
  const groupedMap = rawData.reduce((acc, item) => {
    const groupKey = item.Plsectn;
    // 若分组不存在则初始化
    if (!acc[groupKey]) {
      acc[groupKey] = {
        title: item.PlsectnName,
        checked: false,
        data: [] as RoomItem[]
      };
    }
    // 向对应分组添加子项
    acc[groupKey].data.push({
      key: item.MaintroomName,
      value: false,
      checked: false
    });
    return acc;
  }, {} as Record<string, GroupedRoomData>);

  // 将对象转为数组返回
  return Object.values(groupedMap);
};

在组件中使用 #

结合useEffect和useState完成数据获取与转换：

import { useEffect, useState } from 'react';

// 组件内部逻辑
const YourComponent = () => {
  const [groupedData, setGroupedData] = useState<GroupedRoomData[]>([]);

  useEffect(() => {
    const fetchAndProcessData = async () => {
      try {
        // 从SDK获取原始数据
        const rawData = await BtpBridgeModule.loadDataFromSdk();
        // 转换数据并更新状态
        const transformedData = transformRoomData(rawData);
        setGroupedData(transformedData);
      } catch (error) {
        console.error('数据加载或转换失败:', error);
      }
    };

    fetchAndProcessData();
  }, []);

  // 后续渲染逻辑...
  return <>{/* 你的组件内容 */}</>;
};

export default YourComponent;

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