React+TypeScript环境下如何将JSON对象动态拆分到独立数组

你需要的动态处理逻辑不需要硬编码索引，直接遍历values数组生成独立数组即可，适配1到4个甚至更多对象的场景，以下是React+TS环境下的完整实现：

第一步：定义TS类型 #

// 可以写在组件文件内或者单独的类型声明文件中
type ValueItem = {
  id: string;
  timestamp: unknown[]; // 可根据你实际的timestamp数据类型替换unknown
}

type EquipmentItem = {
  equipment: string;
  values: ValueItem[];
}

// 你的原始JSON数据类型为EquipmentItem[]

第二步：核心拆分逻辑 #

如果你的原始数据数组和示例一样只有1个equipment对象，处理代码如下：

// rawData是你拿到的原始JSON数据
const rawData: EquipmentItem[] = [/* 你的原始JSON */];

// 直接遍历values，每个对象单独包装成数组
const splitArrays = rawData[0].values.map(valueItem => [valueItem]);

如果原始数据数组可能包含多个equipment对象，需要把所有values下的对象都拆分，用flatMap处理即可：

const splitArrays = rawData.flatMap(equipmentItem => 
  equipmentItem.values.map(valueItem => [valueItem])
);

效果说明 #

以你给出的示例数据为例，处理后的splitArrays结果如下：

[
  [ { id: "123456", timestamp: [] } ],
  [ { id: "12345", timestamp: [] } ]
]

自动匹配values数组的长度，后续values内的对象数量在1到4之间变化时，不需要修改处理逻辑。

React组件内使用示例 #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [splitValueArrays, setSplitValueArrays] = useState<ValueItem[][]>([]);

  // 模拟请求数据后处理
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('你的接口地址');
      const rawData: EquipmentItem[] = await res.json();
      const processedData = rawData[0].values.map(v => [v]);
      setSplitValueArrays(processedData);
    };
    fetchData();
  }, []);

  // 后续业务逻辑直接使用splitValueArrays即可
  return <div>{/* 你的组件渲染逻辑 */}</div>
}

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