React中填充嵌套值报错：按type分组类对象至字典失败

你的猜测完全正确，错误根源是当字典中不存在对应type的键时，myDictionary[myClass.type]返回undefined，直接调用push方法会抛出类型错误。以下是具体修复和优化方案：

核心错误修复 #

修改populateDictionaryItem函数，先判断键是否存在，不存在则初始化空数组：

const populateDictionaryItem = (myClass: MyClass) => {
  // 检查键是否存在，不存在则创建空数组
  if (!myDictionary[myClass.type]) {
    myDictionary[myClass.type] = [];
  }
  myDictionary[myClass.type].push(myClass);
};

更优的React实践方案 #

直接使用useMemo计算分组字典（替代useEffect修改变量的方式），避免组件渲染时的状态不一致问题，同时处理myClasses为空的边界情况：

import { FC, useMemo } from 'react';

export class MyClass {
  type: string;
  description: string;
  // other class properties
}

export interface IMyComponentProps {
  myClasses?: MyClass[];
}

export const MyComponent: FC<IMyComponentProps> = ({ myClasses = [] }) => {
  // 用useMemo缓存分组结果，仅当myClasses变化时重新计算
  const myDictionary = useMemo(() => {
    const dict: { [key: string]: MyClass[] } = {};
    myClasses.forEach(item => {
      // 简化判断：若键不存在则初始化空数组
      dict[item.type] = dict[item.type] || [];
      dict[item.type].push(item);
    });
    return dict;
  }, [myClasses]);

  // 按type分组渲染的示例代码
  return (
    <div>
      {Object.entries(myDictionary).map(([type, items]) => (
        <div key={type}>
          <h3>{type}</h3>
          <ul>
            {items.map(item => (
              <li key={item.description}>{item.description}</li>
              // 注意：实际项目建议使用唯一ID作为key，此处为示例
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

优化说明 #

• 给myClasses设置默认值[]，省去undefined的额外判断
• 使用useMemo缓存计算结果，避免组件每次渲染都重复执行分组逻辑
• 用dict[item.type] = dict[item.type] || []简化初始化逻辑，和if判断效果一致
• 补充了分组渲染的示例代码，可直接用于页面展示

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