React/JavaScript中高效合并对象数组内嵌套数组的教程

export const data = [
  {
    accountNo: '1xxx',
    consolidateddata: [
      { name: 'Paypal', expiry: '05/13/2023' },
      { name: 'phonepay', expiry: '05/19/2023' },
    ],
  },
  {
    accountNo: '2xxx',
    consolidateddata: [{ name: 'Paytm', expiry: '05/25/2023' }],
  },
];

[
  { name: 'Paypal', expiry: '05/13/2023' },
  { name: 'phonepay', expiry: '05/19/2023' },
  { name: 'Paytm', expiry: '05/25/2023' }
]

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      DataRows: [],
    };
  }

  // 这个方法在每次调用时都会覆盖DataRows的状态
  ProfileDetails = (profileData) => {
    const newData =
      profileData.consolidateddata &&
      profileData.consolidateddata.map((obj) => {
        return obj;
      });
    this.setState({ DataRows: newData }); // 问题所在：每次都覆盖
  };

  componentDidMount() {
    data && data.forEach(this.ProfileDetails);
  }

  render() {
    console.log(this.state.DataRows); // 最终只会显示最后一个对象数组
    return (
      <div className="App">
        <h1>sample</h1>
      </div>
    );
  }
}

/**
 * 将包含嵌套数组的对象数组扁平化为单个数组。
 * @param {Array<Object>} dataArray - 包含 'consolidateddata' 属性的对象数组。
 * @returns {Array<Object>} 扁平化后的数组。
 */
const getAllData = (dataArray) => {
  // 使用 reduce 方法迭代主数组
  return dataArray.reduce((accumulator, currentValue) => {
    // 从当前对象中解构出 consolidateddata 数组
    const { consolidateddata } = currentValue;
    // 使用 concat 方法和扩展运算符 (...) 将 consolidateddata 中的所有元素
    // 添加到累加器中，并返回一个新的累加器数组。
    // concat 不会修改原数组，而是返回一个新数组，这符合不可变性原则。
    return accumulator.concat(...consolidateddata);
  }, []); // 初始累加器为一个空数组
};

import React from 'react';
import './style.css'; // 假设存在样式文件

// 原始数据
export const data = [
  {
    accountNo: '1xxx',
    consolidateddata: [
      { name: 'Paypal', expiry: '05/13/2023' },
      { name: 'phonepay', expiry: '05/19/2023' },
    ],
  },
  {
    accountNo: '2xxx',
    consolidateddata: [{ name: 'Paytm', expiry: '05/25/2023' }],
  },
];

/**
 * 将包含嵌套数组的对象数组扁平化为单个数组。
 * @param {Array<Object>} dataArray - 包含 'consolidateddata' 属性的对象数组。
 * @returns {Array<Object>} 扁平化后的数组。
 */
const getAllData = (dataArray) => {
  return dataArray.reduce((acc, val) => {
    const { consolidateddata } = val;
    return acc.concat(...consolidateddata);
  }, []);
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      DataRows: [], // 用于存储合并后的数据
    };
  }

  // 组件挂载后执行，是获取初始数据的好时机
  componentDidMount() {
    if (data && data.length > 0) {
      const mergedData = getAllData(data); // 调用扁平化函数获取合并数据
      this.setState({ DataRows: mergedData }); // 一次性更新状态
    }
  }

  render() {
    console.log('合并后的数据:', this.state.DataRows);

    return (
      <div className="App">
        <h1>嵌套数组扁平化示例</h1>
        {/* 在这里可以渲染 DataRows */}
        {this.state.DataRows.length > 0 ? (
          <ul>
            {this.state.DataRows.map((item, index) => (
              <li key={index}>
                {item.name} - {item.expiry}
              </li>
            ))}
          </ul>
        ) : (
          <p>数据加载中...</p>
        )}
      </div>
    );
  }
}

/**
 * 使用 flatMap (ES2019+) 将包含嵌套数组的对象数组扁平化为单个数组。
 * @param {Array<Object>} dataArray - 包含 'consolidateddata' 属性的对象数组。
 * @returns {Array<Object>} 扁平化后的数组。
 */
const getAllDataWithFlatMap = (dataArray) => {
  // flatMap 等同于先 map 再 flat(1)
  return dataArray.flatMap(item => item.consolidateddata);
};