React中用变量作对象键并合并同ID元素值的实现问题

核心问题 #

1. 初始State类型不匹配：你将orderedItems初始化为数组[]，但实际需要的是键为id的对象结构，类型错误会导致后续更新逻辑异常。
2. 未处理重复id的累加场景：当前代码会直接覆盖相同id对应的值，无法实现同一个id下收集多个name的需求。

修正代码 #

首先修正State的初始值：

const [orderedItems, setOrderedItems] = useState({}); // 改为空对象而非数组

然后修改handleOnChange函数，适配重复id的处理逻辑：

const handleOnChange = (item, eventStatus) => {
  if (eventStatus) {
    setOrderedItems((prevItems) => {
      const currentValue = prevItems[item.id];
      let newValue;
      
      if (currentValue) {
        // 已存在对应id的值，判断是否为数组
        if (Array.isArray(currentValue)) {
          // 是数组则追加新name
          newValue = [...currentValue, item.name];
        } else {
          // 是单个值则转为数组后追加
          newValue = [currentValue, item.name];
        }
      } else {
        // 无对应值则直接赋值为单个name（匹配你期望的结构）
        newValue = item.name;
      }
      
      return {
        ...prevItems,
        [item.id]: newValue
      };
    });
  }
};

逻辑说明 #

• 初始State改为空对象，和你期望的最终结构类型保持一致。
• 使用函数式更新setOrderedItems(prev => ...)，确保每次更新都基于最新的State值，避免状态丢失。
• 针对重复id的场景做分支处理：已有数组则追加元素，已有单个值则转为数组再追加，无值则直接赋值。

额外优化建议 #

如果后续业务中希望统一所有id对应的值为数组格式（方便后续遍历、修改等操作），可以把初始赋值也改为数组：

// 在else分支中修改为数组初始化
newValue = [item.name];

这样最终结构会是{1: ['test1', 'test2'], 2: ['test3']}，结构更统一，后续处理成本更低。

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