React中如何分组对象数组并点击新增order递增的对象组？

你的代码存在几个关键问题，导致无法生成预期结构：

• 初始state是数组类型，但你直接将其改为对象类型，后续操作会因为类型不兼容报错（比如数组的reduce方法不能用在对象上）
• item.order++直接修改了原state中的对象，违反了React state不可变的原则，还会导致order值混乱
• 逻辑上没有生成新的分组，只是对现有数据做了错误的重新分组

正确实现方案（初始state为分组对象，更贴合需求） #

import { useState } from "react";

const initialData = [
  { name: "point", label: "Point", order: 1 },
  { name: "optionA", label: "A", order: 1 },
  { name: "optionB", label: "B", order: 1 }
];

// 初始直接转成分组对象，和最终期望结构一致
const initialGroups = {
  1: initialData
};

export default function App() {
  const [formData, setFormData] = useState(initialGroups);

  const addMoreField = () => {
    // 获取当前最大的order值
    const currentMaxOrder = Math.max(...Object.keys(formData).map(Number));
    const newOrder = currentMaxOrder + 1;

    // 复制原始数据，修改order为新值，生成新分组
    const newGroup = initialData.map(item => ({
      ...item,
      order: newOrder
    }));

    // 合并原有分组和新分组，保证不可变操作
    const newFormData = {
      ...formData,
      [newOrder]: newGroup
    };

    setFormData(newFormData);
  };

  return (
    <div className="App">
      <button onClick={addMoreField}>添加分组</button>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}

若坚持初始state用数组的实现方案 #

import { useState } from "react";

const initialData = [
  { name: "point", label: "Point", order: 1 },
  { name: "optionA", label: "A", order: 1 },
  { name: "optionB", label: "B", order: 1 }
];

export default function App() {
  const [formData, setFormData] = useState(initialData);

  const addMoreField = () => {
    // 获取当前最大order值
    const currentMaxOrder = Math.max(...formData.map(item => item.order));
    const newOrder = currentMaxOrder + 1;

    // 生成新分组的所有对象
    const newItems = initialData.map(item => ({
      ...item,
      order: newOrder
    }));

    // 合并原有数组和新数组，再转成分组对象
    const mergedArray = [...formData, ...newItems];
    const newFormData = mergedArray.reduce((groups, item) => {
      return {
        ...groups,
        [item.order]: [...(groups[item.order] || []), item]
      };
    }, {});

    setFormData(newFormData);
  };

  return (
    <div className="App">
      <button onClick={addMoreField}>添加分组</button>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}

核心要点 #

• 严格遵守React state不可变原则：始终复制对象/数组，绝不直接修改原数据
• 新order值基于当前最大order递增，避免重复或混乱
• 新分组的数据是对初始数据的浅拷贝，仅修改order字段

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