React中合并对象数组内嵌套子数组未获预期结果，求解决方案

你当前的代码中，forEach循环调用ProfileDetails时，每次执行this.setState({ DataRows: newData })都会直接覆盖之前的DataRows状态值。第一次循环把第一个对象的consolidateddata赋值给DataRows，第二次循环又用第二个对象的consolidateddata覆盖了它，所以最终只保留了最后一组数据。

推荐先一次性合并所有嵌套数组，再更新状态（避免多次调用setState，提升性能）：

方法一：使用flatMap合并数组 #

修改componentDidMount方法，直接合并所有consolidateddata数组：

componentDidMount() {
  // 遍历data数组，提取每个item的consolidateddata并合并成一个数组
  const mergedData = data.flatMap(item => item.consolidateddata || []);
  this.setState({ DataRows: mergedData });
}

同时可以移除ProfileDetails方法，因为不再需要它。

方法二：函数式更新状态（保留forEach逻辑） #

如果你想保留原有的forEach遍历逻辑，需要使用React的函数式状态更新，基于上一次的状态追加新数据：

ProfileDetails = (profileData) => {
  const newData = profileData.consolidateddata || [];
  // 使用prevState获取当前最新的状态，避免异步更新导致的覆盖问题
  this.setState(prevState => ({
    DataRows: [...prevState.DataRows, ...newData]
  }));
};

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

以下是使用方法一的完整代码：

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' }],
  },
];

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

  componentDidMount() {
    const mergedData = data.flatMap(item => item.consolidateddata || []);
    this.setState({ DataRows: mergedData });
  }

  render() {
    console.log(this.state.DataRows);
    return (
      <div className="App">
        <h1>sample</h1>
      </div>
    );
  }
}

运行后，this.state.DataRows会包含预期的3个对象的合并数组。

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